Как открыть всплывающее окно и отправить данные на контроллер одновременно с помощью вызова ajax в MVC - PullRequest
Новая
       21

Как открыть всплывающее окно и отправить данные на контроллер одновременно с помощью вызова ajax в MVC

0 голосов
/ 04 сентября 2018

Я пытаюсь реализовать функцию поиска в моем представлении формы. Окно поиска откроется во всплывающем окне (в partalView) и запросит поисковые запросы ( figure ). Теперь пользователь вводит все поля поиска и выполняет запрос POST, и в итоге во всплывающем окне отображается таблица результатов поиска.

Форма просмотра (в которой есть кнопка для открытия всплывающего окна) 

@Ajax.ActionLink("Search current form", "SearchAction", new { @id = "SearchBtn" }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" }, new { @class ="btn btn-primary"})<br />
<div id="result" style="display:none"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#result").dialog({
            autoOpen: false,
            title: 'Search Window',
            resizable:0,
            width: 1000,
            height: 700,
            modal: true
        });
    });
    function openPopup() {
        $("#result").dialog("open");
    }
</script>

Представление SearchForm (реализовано как частичное представление) 

@using (Html.BeginForm("SearchAction", "ViewModel", FormMethod.Post, new { @id = "searchform" }))
{
    //some form elements

    <div class="text-center">
        <input type="submit" value="Go" class="btn btn-primary"/>
    </div>
}


<div class="alert-danger">@ViewBag.emptyResult</div>

@if (Model != null)
{
    //display the search results 
}

Теперь, чтобы сохранить всплывающее окно, я должен привязать кнопку Go к действию ajax так же, как и к представлению формы. Также, прочитав это Как передать formcollection с помощью вызова ajax для действия? Я узнал, что действия Ajax отправляют данные JSON в контроллер, а не пару ключей / значений, которая легко доступна с помощью FormCollection. Поэтому мой вопрос заключается в том, как реализовать кнопку отправки (Ajax.Actionlink) в форме поиска, чтобы она отправляла данные в контроллер с помощью FormCollection и также сохраняла всплывающее окно.

1 Ответ

0 голосов
/ 06 ноября 2018

Оказывается, мне просто нужно было определить заполнитель для таблицы результатов в моем всплывающем окне поиска. 

<div id="showData" class="text-center table table-bordered bg-light"></div>

Теперь получите результаты поиска, используя Ajax call 

function GetSearchResult() {
        var searchParams = [];
        //get search queries from textbox ids

        $.ajax({
            type: 'POST',
            dataType: "json",
            traditional: true,
            data: {
                s: searchParams
            },
            url: "/{controller name} /{action}",
            success: function (result) {
                var col = [];
                if (isJson(result)) {
                    var sR = JSON.parse(result);
                    //create a html table using javascript and fill it which the result you got
                var divContainer = document.getElementById("showData");
                divContainer.innerHTML = "";
                divContainer.appendChild(table);  //table is what you created dynamically using javascript
                }
                else {
                    alert("No results found, Please try again");    
                }

            }
        });
    }

Добавьте это действие в свой контроллер 

[HttpPost]
public JsonResult AjaxMethod(string value, string Id)
{
     var updatedList = GetSearchResults(); //get search result from your repository
     return Json(updatedList);
}

А что касается создания html-таблицы через javascript , это мне очень помогло!

...