Asp.net mvc 4 DropDownList中的Ajax.ActionLink参数

我有以下观点：

<div class="editor-label">
    @Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.Type, ElangWeb.Helpers.ModelHelpers.GetExerciseTypes())
</div>

我的控制器操作定义如下：

public ActionResult AddExerciseItem(ExerciseType type)
{

  return PartialView("ExerciseItemOption", new ExerciseItemOption());
}

---

但是，我不工作，因为我的模型有一个例外“对象引用未设置为对象的实例”。如何解决此问题？

您可以使用普通链接：

@Html.ActionLink(
    "AddExerciseItem", 
    "AddExerciseItem", 
    "Exercise", 
    null, 
    new { id = "add" }
)

你可以悄悄地把它变成AJAXify：

// When the DOM is ready
$(function() {
    // Subscribe to the click event of the anchor
    $('#add').click(function() {
        // When the anchor is clicked get the currently
        // selected type from the dropdown list.
        var type = $('#Type').val();

        // and send an AJAX request to the controller action that 
        // this link is pointing to:
        $.ajax({
            url: this.href,
            type: 'GET',
            // and include the type as query string parameter
            data: { type: type },
            // and make sure that you disable the cache because some
            // browsers might cache GET requests
            cache: false,
            success: function(result) {
                // When the AJAX request succeeds prepend the resulting
                // markup to the DOM the same way you were doing in your
                // AJAX.ActionLink
                $('#ExerciseItems').prepend(result);
            }
        });
        return false;
    });
});

现在，您的

AddExerciseItem

控制器操作可以采用类型参数：

public ActionResult AddExerciseItem(string type)
{
    ...
}

---

您可以使用普通链接：

@Html.ActionLink(
    "AddExerciseItem", 
    "AddExerciseItem", 
    "Exercise", 
    null, 
    new { id = "add" }
)

你可以悄悄地把它变成AJAXify：

// When the DOM is ready
$(function() {
    // Subscribe to the click event of the anchor
    $('#add').click(function() {
        // When the anchor is clicked get the currently
        // selected type from the dropdown list.
        var type = $('#Type').val();

        // and send an AJAX request to the controller action that 
        // this link is pointing to:
        $.ajax({
            url: this.href,
            type: 'GET',
            // and include the type as query string parameter
            data: { type: type },
            // and make sure that you disable the cache because some
            // browsers might cache GET requests
            cache: false,
            success: function(result) {
                // When the AJAX request succeeds prepend the resulting
                // markup to the DOM the same way you were doing in your
                // AJAX.ActionLink
                $('#ExerciseItems').prepend(result);
            }
        });
        return false;
    });
});

现在，您的

AddExerciseItem

控制器操作可以采用类型参数：

public ActionResult AddExerciseItem(string type)
{
    ...
}

---

这是一个很好的答案，但我想知道，有什么原因我不能使用@Ajax.ActionLink来实现这一点吗？是的，当然有原因。@Ajax.ActionLink帮助程序强制您提供将发送到服务器的所有参数。除此之外，正如您所知，Ajax.ActionLink helper在服务器上运行，在这一阶段，下拉列表中的Type参数没有任何值，因为用户可能会在很久以后对其进行更改，您必须考虑到这一更改，并在单击链接时从下拉列表中获取正确的值，而不是此时当页面呈现时。这很好，但是当我尝试返回PartialView时，它确实会返回，但不会追加练习项，而是由PartialView显示在空页面中。如果存在javascript错误，则可能会发生这种情况。检查你的js控制台。我知道发生了什么。为ActionLink注册的操作“AddExerciseItem”执行了两次。这是一个很好的答案，但我想知道，有什么原因我不能使用@Ajax.ActionLink这样做吗？是的，当然有原因。@Ajax.ActionLink帮助程序强制您提供将发送到服务器的所有参数。除此之外，正如您所知，Ajax.ActionLink helper在服务器上运行，在这一阶段，下拉列表中的Type参数没有任何值，因为用户可能会在很久以后对其进行更改，您必须考虑到这一更改，并在单击链接时从下拉列表中获取正确的值，而不是此时当页面呈现时。这很好，但是当我尝试返回PartialView时，它确实会返回，但不会追加练习项，而是由PartialView显示在空页面中。如果存在javascript错误，则可能会发生这种情况。检查你的js控制台。我知道发生了什么。为ActionLink注册的操作“AddExerciseItem”将执行两次。