Как мы можем фильтровать записи в строго типизированном частичном представлении в ASP.NET MVC?

Question

У меня строго типизированное частичное представление, которое заполняет все записи из таблицы поиска.Теперь у меня есть текстовое поле для ввода имени и кнопка для фильтрации записей, которые могут соответствовать имени. (Как страница поиска).

Кто-нибудь может предоставить пример кода для этого сценария?

My MainСтраница загружает конкретный вид на основе выбора радиокнопки (Поиск или Запрос), как показано ниже, с использованием JQuery:

/ * Загрузка частичного вида на основе переключателя нажимается ... * /

        $(document).ready(function() {
            $(':radio').click(function() {
                if (this.value == '2') {
                $('#ViewAllInquiries').load('/Home/Inquiry', function(html) { $('#ViewAllInquiries')[0].value = html; });
                }
                else {
                    $('#ViewAllInquiries').load('/Home/Search', function(html) { $('#ViewAllInquiries')[0].value = html; });
                }
            });
        })

Вот мой частичный вид ControllerCode:

[HttpGet]

    public ActionResult Search()
    {
        var search = from s in entity.Search
                     select s; return PartialView(search);
    }

Вот пользовательcontrol Частичное представление (Search.ascx):

> "%>

<table >
<thead>
    <tr>
        <th align="left"> </th>
        <th align="left"> TX_Id</th>
        <th align="left">Name&nbsp;
           <%= Html.TextBox("Name")%>&nbsp;<input type="submit" value="Filter" /></th>
        <th align="left">Email Address</th>
     </tr>

<% foreach (элемент var в модели) {%> <% = Html.Encode (item.TX_Id)%> "> <% = Html.Encode (item.CustomerMaster.FullName ())%> <% = Html.Encode (item.CustomerMaster.MS_Id)%> <%}%>

Спасибо за ваше время.

Answer 1

Я делаю то же самое, используя форму Ajax. Это действительно легко. Вот код, который я использую:

Html:

<div>
    <% 
        using (Ajax.BeginForm("Home", "Search", null,
            new AjaxOptions { UpdateTargetId = "Output" }, 
            new { id = "SearchForm" }))
        {
            %>

                <!-- Form Fields --> 
                <input name="searchField" />
                <input type="submit" value="Search" />   
            <%
        } 
    %>

    <div id="Output">

    </div>

</div>

Тогда в контроллере просто есть:

public PartialViewResult Search(FormCollection form)
{

    var model = YourSearchMethod(form["searchField"]);
    return PartialView("Search", model);

}

Div с идентификатором «Output» будет обновляться с вашим частичным результатом просмотра каждый раз, когда нажимается кнопка «Отправить». В вашем случае у вас есть два различных возможных частичных представления, просто отправьте значение переключателя как часть вашей формы, и вы можете переключить выходное представление из контроллера.

Зачем использовать FormCollection вместо параметров? У меня были некоторые трудности с использованием именованных параметров с формами ajax, но вы можете попробовать и посмотреть, как это работает. Вместо этого он должен выглядеть примерно так:

public PartialViewResult Search(string searchField, bool inquiry)
{
    if (inquiry)
    {
        var model = YourInquiryMethod(searchField);
        return PartialView("Inquiry", model);
    }
    else
    {
        var model = YourSearchMethod(searchField);
        return PartialView("Search", model);
    }
}

Answer 2

Я делаю то же самое на одном из своих сайтов, но немного продвинула его.

У меня есть в моем представлении следующий HTML;

<div class="EditProductContainer hidden"></div>

У меня также есть следующий jQuery;

 function editBenefit(objThis) {
     var id = $(objThis).parents('.Benefit').attr("id");
     $.post("/Home/jQueryGetBenefit", { Id: id },
        function(newHTML) {
            $('.EditProductContainer').html(newHTML);
        });
 }

Тогда в моем контроллере у меня есть;

    [AcceptVerbs(HttpVerbs.Post)]
    public PartialViewResult jQueryGetBenefit(int Id)
    {
        Application application = Helpers.CacheHelper.Get();
        Benefit thisBenefit = application.findBenefit(Id);

        return PartialView("EditBenefit", thisBenefit);
    }

Я думаю, что это делает то, что вы хотите, но я возвращаю визуализированный PartialView и заменяю содержимое содержащего div на HTML, сгенерированный частичным представлением.

Надеюсь, это поможет.