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

Posted 2023-04-13

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

【英文标题】：Fire jQuery change event on drop down list in ASP.NET MVC and pass a parameter to url actions

【发布时间】：2018-10-23 12:10:58

【问题描述】：

这是一个视图逻辑

@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 他没有发送值来返回普通视图而不是搜索结果

【问题讨论】：

你想提交一个普通的表单还是一个 ajax 帖子？

从下拉列表中选择值时究竟会发生什么？你有什么错误吗？你能调试searchWithDropsAj方法的代码吗？

问题是将参数传递给动作 searchWithDropsAj 他没有发送值以返回正常视图而不是搜索结果

【参考方案1】：

如果您想在用户在下拉列表中进行选择时使用 jQuery load 方法更新结果，第一步是摆脱 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 事件，读取输入和选择元素值并将其发送到服务器。

$(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 里面。阅读where should i place the js script files in a mvc application so jquery works well?以获取更多参考