将javascript返回值传递给MVC 4中的控制器

Pass javascript return value to controller in MVC 4

本文关键字：MVC 控制器 javascript 返回 返回值 值传      更新时间：2023-09-26

在我的MVC 4应用程序中，我有一个部分视图。包含一个下拉列表。当我更改下拉列表时，该值必须发送给控制器。但它发送的是空值。如何将下拉值发送到控制器。

提前谢谢。

这是我的代码：

下拉列表代码：

<select name="ddSortByPrice" id="ddSort" onchange="this.form.submit(getComboA(this))")">
<option>-- Sort By Price --</option>
@foreach (var item in ViewBag.SortingStatus){
<option value="@item.Value">@item.Text</option>
}</select>

Javascript代码：

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;
         $.post('<%= Url.Action("WhatsNewSortBy","RouteValue") %>', new { value: val },        function(result) {
         // TODO: handle the success
         });
 }

控制器代码：

public ActionResult WhatsNewSortBy(string value)
    {
        return RedirectToAction("WhatsNewOffers", "Product", new { @sortBy = value});
    }

您可以使用类似的东西

@using (Html.BeginForm("WhatsNewSortBy", "RouteValue", FormMethod.Post))
{
    <span style="display:none;">
    @Html.DropDownList("SortBy", ViewData["SortBy"] as SelectList, "-- Sort By Price --", new { onchange = "this.form.submit()" })
}

使用对象Model中的SortBy作为字符串，这样您就可以再次将其传递回控制器

在ViewData["SortBy"]中，您可以通过控制器

 IList<SelectListItem> sortBy = new List<SelectListItem>();
        for (int i = 0; i < 100; i++) // add the logic you like 
        {
            SelectListItem sort = new SelectListItem();
                sort.Text = i.ToString();
                sort.Value = i.ToString();
                sortBy.Add(sort);
        }
        ViewData["SortBy"] = sortBy;

您可以在不使用任何javascript的情况下使用排序。

首先，它应该是{value:value}而不是val，因为看起来val不存在。此外，您不必为javascript对象文字编写new。尝试：

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;
         $.post('<%= Url.Action("WhatsNewSortBy","RouteValue") %>',{ value: value}, function(result) {
         // TODO: handle the success
         });
 }

以这种方式从select中获取值没有错，这里是一个jsfiddle，显示它与vanillaJS和jquery一起工作：http://jsfiddle.net/89JZn/:

<select onchange="handleChangeWithVanillaJs(this)">
    <option value="v1">val1</option>
    <option value="v2">val2</option>
    <option value="v3">val3</option>
</select>

处理程序的jQuery和纯javascript版本：

var handleChange = function(select){
    var selectedValue = $(select).val();
    alert(selectedValue);
};
var handleChangeWithVanillaJs = function(select){
    var selectedValue = select.options[select.selectedIndex].value;
    alert(selectedValue);
}

不过，您对$.post的调用不正确，您应该从"new｛value:value｝"中获得TypeError，并且"val"不存在于｛value:val｝中，语法为fieldName:fieldValue。只需传入｛value:value｝：

 $.post('<%= Url.Action("WhatsNewSortBy","RouteValue") %>', { value: value },        function(result) {
         // TODO: handle the success
         });

确保您的控制器操作具有[HttpPost]，并且操作的参数名称是具有适当类型的值，即：

[HttpPost]
public ActionResult WhatsNewSortBy(string value)
{
    return RedirectToAction("WhatsNewOffers", "Product", new { @sortBy = value});
}
相关文章：