如何在Url.RouteUrl中传参？JS/JQ实现变量值传递遇阻求助

Hey there! Let's break down your two issues one by one, nice and simple since you mentioned you're new to JS/jQuery and ASP.NET routing.

First, let's start with a clear example of how to grab the selected value from your <select> and assign it to addressId when the button is clicked. I'll show both jQuery and vanilla JavaScript options so you can pick what works for you.

Step 1: Example HTML Structure #

First, make sure your select and button have unique IDs (this makes targeting them way easier):

<!-- Give your select an ID to reference it -->
<select id="caDropdown">
  <option value="address_1">Address 1</option>
  <option value="address_2">Address 2</option>
  <option value="address_3">Address 3</option>
</select>

<!-- Button to trigger the value transfer -->
<button id="assignAddressBtn">Set Address ID</button>

Step 2: jQuery Solution #

If you're already using jQuery, this is straightforward:

// Wait for the page to fully load before binding events
$(document).ready(function() {
  // Bind a click event to the button
  $('#assignAddressBtn').click(function() {
    // Grab the selected value from the dropdown
    var ca = $('#caDropdown').val();
    // Assign it to your addressId variable
    var addressId = ca;
    
    // Test if it works (check your browser's console with F12)
    console.log("addressId has been set to:", addressId);
    
    // From here you can use addressId for whatever you need:
    // Submit a form, update a hidden input, call an API, etc.
  });
});

Step 3: Vanilla JavaScript Solution #

If you don't want to use jQuery, here's the native JS version:

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Get references to your elements
  const btn = document.getElementById('assignAddressBtn');
  const dropdown = document.getElementById('caDropdown');
  
  // Bind click event
  btn.addEventListener('click', function() {
    // Get selected value
    const ca = dropdown.value;
    // Assign to addressId
    let addressId = ca;
    
    // Test the value
    console.log("addressId is now:", addressId);
  });
});

Common Pitfalls to Check #

• Make sure your <select> and button IDs match exactly what you're using in JS/jQuery (typos are the #1 culprit!).
• Always wait for the DOM to load before trying to access elements (that's what $(document).ready or DOMContentLoaded does).
• Ensure your <option> tags have valid value attributes (if you're seeing undefined, this is probably why).

Url.RouteUrl is used in ASP.NET Razor views to generate URLs based on your defined routes. Here's how to pass parameters correctly:

Basic Single Parameter Example #

First, let's assume you have a route defined in your RouteConfig.cs like this:

routes.MapRoute(
    name: "AddressDetails",
    url: "Addresses/Details/{addressId}",
    defaults: new { controller = "Addresses", action = "Details" }
);

To generate a URL with addressId using Url.RouteUrl, pass an anonymous object as the second parameter (the keys must match your route's parameter names):

<!-- Generate a link directly in Razor -->
<a href='@Url.RouteUrl("AddressDetails", new { addressId = 123 })'>View Address 123</a>

Passing Multiple Parameters #

If your route has multiple parameters, just add more properties to the anonymous object:

// Example route with two parameters
routes.MapRoute(
    name: "UserAddress",
    url: "Users/{userId}/Addresses/{addressId}",
    defaults: new { controller = "Users", action = "ViewAddress" }
);

<!-- Generate URL with both userId and addressId -->
<a href='@Url.RouteUrl("UserAddress", new { userId = 456, addressId = 789 })'>View User 456's Address 789</a>

Using It with JavaScript (Combine with Your First Issue) #

If you want to generate the URL dynamically using the addressId you grabbed from the dropdown, you can create a placeholder URL in Razor and replace it in JS:

<script>
  // Create a URL template with a placeholder for addressId
  const urlTemplate = '@Url.RouteUrl("AddressDetails", new { addressId = "PLACEHOLDER" })';
  
  // Later, when you have your addressId from the dropdown:
  function getAddressUrl(addressId) {
    // Replace the placeholder with the actual value
    return urlTemplate.replace("PLACEHOLDER", addressId);
  }
  
  // Use it in your button click event:
  $('#assignAddressBtn').click(function() {
    const ca = $('#caDropdown').val();
    const addressId = ca;
    const fullUrl = getAddressUrl(addressId);
    console.log("Generated URL:", fullUrl);
    // Redirect or use this URL as needed
    // window.location.href = fullUrl;
  });
</script>

内容的提问来源于stack exchange，提问作者Мурад Османов