在 ASP.NET MVC 中的下拉列表中触发 jQuery 更改事件并将参数传递给 url 操作

Question

这是一个视图逻辑

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "getOurSlider" }))
{
    <input type="search" name="term" id="term" placeholder="enter your search" />

    @Html.DropDownList("DropSearch", new List<SelectListItem>
            {
                new SelectListItem { Text = "search by start ", Value = "stSeach", Selected=true},
                new SelectListItem { Text = "search by end", Value = "endSearsh"},
                new SelectListItem { Text = "search by contains", Value = "conSearch"}
            }, "choose search type")

    <input type="submit" value="start with search" />
}

这是控制器中的代码：

public ActionResult searchWithDropsAj()
{
    return View(db.movieTbls.ToList());
}

[HttpPost]
public ActionResult searchWithDropsAj(string term)
{
    string searchoptions = Request["DropSearch"];
    var productSearch = new List<movieTbl>();

    if (searchoptions == "conSearch")
    {
        productSearch = (from pr in db.movieTbls
                         where pr.movieName.Contains(term) || pr.movieName == null
                         select pr).ToList();
    }
    else if (searchoptions == "stSearch")
    {
        productSearch = (from pr in db.movieTbls
                         where pr.movieName.StartsWith(term) || pr.movieName == null
                         select pr).ToList();
    }
    else if (searchoptions == "endSearch")
    {
        productSearch = (from pr in db.movieTbls
                         where pr.movieName.EndsWith(term) || pr.movieName == null
                         select pr).ToList();
    }

    return View(productSearch);
}

我想在更改下拉列表、调用控制器操作等时使用 jQuery 加载。

我试过很多这样的东西

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var term = $('#term').val();
        $('#DropSearch').change(function () {

            @*$("#getOurSlider").load('@(Url.Action("searchWithDropsAj", "movieTbls")',
                { term: $("#term").val()});*@
            $('#getOurSlider').load('@Url.Action("searchWithDropsAj", "movieTbls")', {term="term" });
        });
    });
</script>

因为我无法将下拉列表值传递给控制器操作，因为操作基于此值进行操作，我尝试了很多方法但对我不起作用

明确一点：问题是将参数传递给动作 searchWithDropsAj 他没有将值发送到 return 普通视图而不是搜索结果

Answer 1

如果您想使用 jQuery load 方法在用户在您的下拉列表中创建 selection 时更新结果，第一步是摆脱 ajax 形式。

呈现一个正常的 form 标签，其中 action 属性值设置为您的 http post 操作方法。

@using (Html.BeginForm("searchWithDropsAj","movieTbls"))
{
    <input type="search" name="term" id="term" placeholder="enter your search" />

    @Html.DropDownList("DropSearch", new List<SelectListItem>
    {
        new SelectListItem { Text = "search by start ", Value = "stSeach", Selected=true},
        new SelectListItem { Text = "search by end", Value = "endSearsh"},
        new SelectListItem { Text = "search by contains", Value = "conSearch"}
    }, "choose search type")

    <input type="submit" value="start with search" />
}
<div id="getOurSlider"></div>

现在侦听此 SELECT 元素上的 change 事件并读取输入和 select 元素值并将其发送到服务器。

$(document).ready(function () {

    $('#DropSearch').change(function () {

        // read the dropdown selection
        var val = $(this).val();  

        // read the url to send data to
        var url = $(this).closest("form").attr("action");  

        //read the input value
        var term = $("#term").val(); 

        // make the ajax call
        $('#getOurSlider').load(url, { searchType: val, term: term });
    });

 });

您可以将 searchType 参数添加到您的操作方法中。还要确保您在执行 ajax 调用以更新当前页面的一部分时不会返回完整视图（带布局）。您可以使用 PartialView 方法

[HttpPost]
public ActionResult searchWithDropsAj(string term, string searchType)
{
    var productSearch = new List<movieTbl>();
    if (searchType == "conSearch")
    {
      // your existing code to get data
    }
    // your existing code to get data       

    return PartialView(productSearch);
}

一些小技巧

如果出现问题，请打开浏览器开发工具并检查 console 选项卡以查看是否存在任何脚本错误。
检查 network 选项卡以查看是否对 searchWithDropdAj 操作方法进行了 ajax 调用。检查响应状态是什么。如果一切顺利，它应该是一个 200 响应。检查响应选项卡以进一步验证从 ajax 调用返回的标记。
如果响应不是 200，而是类似于 500，这意味着您的服务器代码崩溃并返回返回异常详细信息和 500 状态代码。检查响应选项卡以查看异常详细信息。也尝试在您的服务器代码中放置断点并检查预期的参数值。
这与第 1 项有关。确保您的 jQuery 相关代码仅在在 jQuery 加载到页面后执行。如果您收到一条消息说 $ is not defined，这意味着您正在尝试执行一些使用 jQuery 的代码，甚至在 jQuery 加载到页面之前。检查页面的视图源以确保顺序正确（首先包含 jQuery，然后是使用 jQuery 的脚本）。很多时候，人们把 jQuery 依赖脚本放在 razor 视图上，却忘了把它放在 Scripts section 里面。阅读进一步参考

在 ASP.NET MVC 中的下拉列表中触发 jQuery 更改事件并将参数传递给 url 操作

Fire jQuery change event on drop down list in ASP.NET MVC and pass a parameter to url actions

c#

asp.net-mvc

jquery

asp.net-ajax