Запустите событие изменения jQuery в раскрывающемся списке в ASP.NET MVC и передайте параметр в действия 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 он не отправил значение, чтобы вернуть нормальный вид, а не результат поиска

Answer 1

Если вы хотите использовать метод jQuery load для обновления результатов, когда пользователь делает выбор в раскрывающемся списке, первым шагом является избавление от формы ajax.

Визуализация обычного тега form со значением атрибута action, установленным для вашего метода http post action.

@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>

Теперь прослушайте событие 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);
}

Несколько советов

1. Если что-то не работает, откройте инструменты разработки браузера и откройте вкладку console, чтобы увидеть, есть ли какие-либо ошибки скрипта.

2. Проверьте вкладку network, чтобы увидеть, был ли выполнен ajax-вызов метода действия searchWithDropdAj. Проверьте статус ответа. Если все идет хорошо, должно быть 200 ответов. Проверьте вкладку ответа, чтобы дополнительно проверить разметку, возвращаемую при вызове ajax.

3. Если ответ не 200 , а что-то вроде 500 , это означает, что код вашего сервера потерпел крах и вернул детали исключения и 500 кодов состояния обратно. Проверьте вкладку ответа, чтобы увидеть подробности исключения. Также попробуйте установить точку останова в коде вашего сервера и проверить ожидаемые значения параметров.

4. Это относится к пункту № 1. Убедитесь, что ваш зависимый от jQuery код выполняется только после jQuery загружается на страницу. Если вы получаете сообщение «1043», это означает, что вы пытаетесь выполнить некоторый код, использующий jQuery, даже до того, как jQuery будет загружен на страницу. Проверьте исходный вид страницы, чтобы убедиться, что порядок правильный (сначала включен jQuery, а затем скрипт, использующий jQuery). Часто люди помещали зависимый от jQuery скрипт в представление бритвы, но забывали поместить его в Scripts section. Прочитайте , где я должен разместить файлы сценариев js в приложении mvc, чтобы jquery работал хорошо? для дальнейшего ознакомления