如何将选定的dropdownlist值传递给MVC 4中的Ajax.ActionLink? [英] How to pass selected dropdownlist value to Ajax.ActionLink in MVC 4?

问题描述

我正在尝试使用MVC 4中的Ajax.Actionlink传递表单值"CustomerID"(即下拉列表选择的值).有人可以告诉我我在做什么错吗?

I am trying to pass a Form value "CustomerID" (i.e.dropdownlist selected value) using Ajax.Actionlink in MVC 4. Can someone tell me what I am doing wrong here?

<div class="editor-label">
    @Html.LabelFor(model => model.CustomerID, "Customer Name")
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.CustomerID, Model.CustomersList, "-- Select --")
    @Html.ValidationMessageFor(model => model.CustomerID)
</div>

<div id="ApptsForSelectedDate">
   @Ajax.ActionLink("Click here to view appointments",
                    "AppointmentsList",
                    new {id = Model.CustomerID},
                    new AjaxOptions
                    {
                       UpdateTargetId = "ApptsForSelectedDate",
                       HttpMethod = "GET",
                       InsertionMode = InsertionMode.Replace,
                       LoadingElementId = "progress"
                    }
                  )            
</div>
<div id="progress">
   <img src="../../Images/ajax-loader.gif" alt="loader image" />
</div>

我的控制器方法如下:

public PartialViewResult AppointmentsList(int id)
{   ... }

推荐答案

您应该使用Ajax.BeginForm并将下拉列表放入表单中.这样，值将被自动传递.

You should use an Ajax.BeginForm and put the dropdown inside the form. This way the value will be automatically passed.

不幸的是，如果您已经有另一个包装此标记的表单，则无法嵌套html表单，因此无法使用嵌套表单.

Unfortunately since you cannot nest html forms if you already have another form wrapping this markup you cannot use a nested form.

在这种情况下，您可以使用普通链接:

In this case you could use a normal link:

@Html.ActionLink(
    "Click here to view appointments", 
    "AppointmentsList", 
    null, 
    new { id = "applink" }
)

，并在单独的javascript文件中将其AJAX修改，并通过在发送AJAX请求时读取所选的下拉值，将必要的信息附加到查询字符串中:

and in a separate javascript file AJAXify it and append the necessary information to the query string by reading the selected dropdown value at the moment the AJAX request is sent:

$(function() {
    $('#applink').click(function() {
        $('#progress').show();
        $.ajax({
            url: this.href,
            type: 'GET',
            data: { id: $('#CustomerID').val() },
            complete: function() {
                $('#progress').hide();
            },
            success: function(result) {
                $('#ApptsForSelectedDate').html(result);
            }
        });
        return false;
    });
});

这篇关于如何将选定的dropdownlist值传递给MVC 4中的Ajax.ActionLink?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！