javascript - 将值传递给 Controller

Question

我正在努力将我需要的所有数据传递给 MVC 中的 Controller 。代码如下:

 <td><a href=@Url.Action("AddCourseToStudentPlan", "Users", new { 
courseID = c.CourseId, userID = user.UserId, semNum = num}) title="Add Course 
to Semester" >"Here"</a></td>

(当前 num 定义为 var num = 1;，这当然行不通。)

类(class) ID 和用户 ID 顺利通过。这些值本质上来自 ViewBag。

但是，semNum 依赖于完全不同的东西:

<ul class="nav nav-tabs" id="Semtabs">
                    @{ var year = plan.CatalogYear; }
                    <li class="active"><a href="#SEM1" onclick="StoreNum(1)" data-toggle="tab" aria-expanded="true">Fall @year</a></li>
                    @{ year += 1; }
                    <li class=""><a href="#SEM2" data-toggle="tab" aria-expanded="true">Spring @year</a></li>
                    <li class=""><a href="#SEM3" data-toggle="tab" aria-expanded="true">Fall 2014</a></li>
                    <li class=""><a href="#SEM4" data-toggle="tab" aria-expanded="true">Spring 2015</a></li>
                    <li class=""><a href="#SEM5" data-toggle="tab" aria-expanded="true">Fall 2015</a></li>
                    <li class=""><a href="#SEM6" data-toggle="tab" aria-expanded="true">Spring 2016</a></li>
                    <li class=""><a href="#SEM7" data-toggle="tab" aria-expanded="true">Fall 2016</a></li>
                    ...

预期的输出是，当用户单击其中一个选项卡时，他们会看到已添加的类(class)列表，并且能够通过单击上一个代码块中的链接将类(class)添加到此选项卡。因此，单击选项卡应更改 @Url.Action() 方法中 num 的值。但我当然不能这样做，因为 C# 是服务器端。

所以问题是，在页面加载后，我如何能够将一些变量 semNum (由客户端确定)传递给 @Url.Action() 方法？

Answer 1

有多种方法可以做到这一点。这相当直观，不会在 Visual Studio 中导致语法错误。

1. 使用您知道的信息创建网址模板。
2. 点击链接后，查看选项卡的当前状态。
3. 使用该信息来完成网址。
4. 根据需要导航。

<!-- define a link/button, but don't set the URL -->
<a id="add-url-button">Add Course to Semester</a>

<!-- your existing tabs -->
<ul class="nav nav-tabs" id="Semtabs">
    <li><a href="#SEM2" data-semester-number="2">Tab 1</a></li>
    <li class="active"><a href="#SEM3" data-semester-number="3">Tab 2</a></li>

    <!-- etc. -->
</ul>

<script>

// Create a URL template    

// It sounds like semNum is the only value that needs to vary,
// but you can create a template with multiple placeholders.

// We pass zero for semNum so that routes will still match without
// conflicting with a real semester number.
var addUrlTemplate = '@Url.Action("AddCourseToStudentPlan", "Users", new { courseID = c.CourseId, userID = user.UserId, semNum = 0 }';

// jQuery here for brevity (will work fine with vanilla JS)

var addButton = $("#add-url-button"),
    tabs = $("#Semtabs");

addButton.click(function(){

    // determine the selected tab by interrogating the list of tabs
    var activeTab = tabs.find("li.active"),
        semesterNumber = activeTab.attr("semester-numer");

    // Construct the complete URL. Depending on the URL, you may need
    // a smarter regex. Be sure that there is no chance of accidentally
    // replacing the wrong value.
    var addUrl = addUrlTemplate.replace(/0$/, semesterNumber);

    // navigate as desired
    window.location.href = addUrl;
));

</script>