AJAX and ASP.NET MVC

[Heidel]

Форма, которая посылает данные через AJAX

@using (Ajax.BeginForm(
new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "restaurantList"
}))
{
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
}

<div id="restaurantList">
    @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <div>
                Reviews:  @item.CountOfReviews
            </div>
            <hr />
        </div>
    }
</div>

В контроллере

        public ActionResult Index(string searchTerm = null)
        {

            var model =
                _db.Restaurants
                   .OrderByDescending(r => r.Reviews.Average(review => review.Rating))
                   .Where(r => searchTerm == null || r.Name.StartsWith(searchTerm))
                   .Take(10)
                   .Select(r => new RestaurantListViewModel
                            {
                                Id = r.Id,
                                Name = r.Name,
                                City = r.City,
                                Country = r.Country,
                                CountOfReviews = r.Reviews.Count()
                            });

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Restaurants", model);
            }
            
            return View(model);
        }

Форма (угловые скобки)

form method="get" action="@Url.Action("Index")"
    data-otf-ajax="true" data-otf-target="#restaurantList"

    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
/form

otf.js

$(function () {
    var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-otf-target"));
            $target.replaceWith(data);
        });

        return false;
    };

    $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
});

Autocomplete

В контроллере

        public ActionResult Autocomplete(string term)
        {
            var model = 
                _db.Restaurants
                .Where(r => r.Name.StartsWith(term))
                .Take(10)
                .Select(r => new
                {
                    label = r.Name
                });
            
            return Json(model, JsonRequestBehavior.AllowGet);
        }

В виде (угловые скобки)

form method="get" action="@Url.Action("Index")"
    data-otf-ajax="true" data-otf-target="#restaurantList"

    <input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete")" />
    <input type="submit" value="Search By Name" />
/form

otf.js

$(function () {
    var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-otf-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("highlight");
        });

        return false;
    };

    var submitAutocompleteForm = function (event, ui) {
        var $input = $(this);
        $input.val(ui.item.label);

        var $form = $input.parents("form:first");
        $form.submit();
    };

    var createAutocomplete = function () {
        var $input = $(this);

        var options = {
            source: $input.attr("data-otf-autocomplete"),
            select: submitAutocompleteForm
        };

        $input.autocomplete(options);
    };

    $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
    $("input[data-otf-autocomplete]").each(createAutocomplete);
});

Paging Results

References -- Manage NuGet Packages -- Online -- в поиске задать pagedlist -- PagedList.Mvc

В контроллере

using PagedList;

public ActionResult Index(string searchTerm = null, int page = 1)
        {

            var model =
                _db.Restaurants
                   .OrderByDescending(r => r.Reviews.Average(review => review.Rating))
                   .Where(r => searchTerm == null || r.Name.StartsWith(searchTerm))
                   .Select(r => new RestaurantListViewModel
                            {
                                Id = r.Id,
                                Name = r.Name,
                                City = r.City,
                                Country = r.Country,
                                CountOfReviews = r.Reviews.Count()
                            }).ToPagedList(page, 10);

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Restaurants", model);
            }
            
            return View(model);
        }

В файле Web.config, который находится в папке View, добавляем неймспейсы по умолчанию и перезагрузить Студию, чтобы изменения применились

        <add namespace="PagedList"/>
        <add namespace="PagedList.Mvc"/>
        <add namespace="OdeToFood.Models"/>

Подключить стили пейджера в бандл к стилям сайта

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/PagedList.css"));

В виде _Restaurants.cshtml

@model IPagedList<RestaurantListViewModel>

<div id="restaurantList">
    
    <div class="pagedList" data-otf-target="#restaurantList">
        @Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
        PagedListRenderOptions.MinimalWithItemCountText)
    </div>
    
    @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <div>
                Reviews:  @item.CountOfReviews
            </div>
            <hr />
        </div>
    }
</div>

Скрипт otf.js

$(function () {
    var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-otf-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("highlight");
        });

        return false;
    };

    var submitAutocompleteForm = function (event, ui) {
        var $input = $(this);
        $input.val(ui.item.label);

        var $form = $input.parents("form:first");
        $form.submit();
    };

    var createAutocomplete = function () {
        var $input = $(this);

        var options = {
            source: $input.attr("data-otf-autocomplete"),
            select: submitAutocompleteForm
        };

        $input.autocomplete(options);
    };

    var getPage = function () {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(),
            type: "get"
        };

        $.ajax(options).done(function (data) {
            var target = $a.parents("div.pagedList").attr("data-otf-target");
            $(target).replaceWith(data);
        });

        return false;
    };

    $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
    $("input[data-otf-autocomplete]").each(createAutocomplete);

    $(".main-content").on("click", ".pagedList a", getPage);
});

@темы: ASP.NET MVC, С#, AJAX and ASP.NET MVC