Asp.net mvc 4 在MVC4中获取数据而不刷新页面的Ajax代码

Asp.net mvc 4 在MVC4中获取数据而不刷新页面的Ajax代码,asp.net-mvc-4,Asp.net Mvc 4,我正在使用vs2010。下面的程序需要从数据库中获取数据并进行渲染,而不刷新页面。但当我输入一些名称并单击搜索按钮时,下面的程序总是刷新页面 Index.cshtml @model IEnumerable<OdeToFood.Models.RestaurentListViewModel> @{ ViewBag.Title = "Home Page"; } <form method="get" action="@Url.Action

我正在使用vs2010。下面的程序需要从数据库中获取数据并进行渲染,而不刷新页面。但当我输入一些名称并单击搜索按钮时,下面的程序总是刷新页面

Index.cshtml

@model IEnumerable<OdeToFood.Models.RestaurentListViewModel>

    @{
        ViewBag.Title = "Home Page";
    }


     <form method="get" action="@Url.Action("Index")" data-otf-ajax="true" data-otf-target="#restaurentList">
     <input type="text" name="searchTerm" />
            <input type="submit" value="Search"/>
     </form>


     @Html.Partial("_Restaurents",Model)
otf.js

public ActionResult Index( string searchTerm=null)
        {

            var model = _db.Restaurent.OrderByDescending(r => r.RestaurentReview.Average(review => review.Rating))
                .Where(r=>searchTerm==null || r.Name.StartsWith(searchTerm))
                .Take(10)
                .Select(r => new RestaurentListViewModel
                {
                    id = r.id,
                    Name = r.Name,
                    City = r.City,
                    Country = r.Country,
                    CountOfReviews = r.RestaurentReview.Count()
                });

            if (Request.IsAjaxRequest()) {//control never comes inside the if
                return PartialView("_Restaurents",model);
            }
            return View(model);
        }
$(function () {

    var AjaxFormSubmit = function () { 
        alert("hai ajax");
        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.replace(data); 

        });

        return false; 
    };


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

});
bundles.Add(new ScriptBundle("~/bundles/otf").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery-ui-{version}.js",
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*",
                         "~/Scripts/otf.js"
                        ));
BundleConfig.cs

public ActionResult Index( string searchTerm=null)
        {

            var model = _db.Restaurent.OrderByDescending(r => r.RestaurentReview.Average(review => review.Rating))
                .Where(r=>searchTerm==null || r.Name.StartsWith(searchTerm))
                .Take(10)
                .Select(r => new RestaurentListViewModel
                {
                    id = r.id,
                    Name = r.Name,
                    City = r.City,
                    Country = r.Country,
                    CountOfReviews = r.RestaurentReview.Count()
                });

            if (Request.IsAjaxRequest()) {//control never comes inside the if
                return PartialView("_Restaurents",model);
            }
            return View(model);
        }
$(function () {

    var AjaxFormSubmit = function () { 
        alert("hai ajax");
        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.replace(data); 

        });

        return false; 
    };


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

});
bundles.Add(new ScriptBundle("~/bundles/otf").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery-ui-{version}.js",
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*",
                         "~/Scripts/otf.js"
                        ));
但是,如果我给出以下代码,程序将在不刷新页面的情况下运行

@using (Ajax.BeginForm(
    new AjaxOptions
    {
        HttpMethod = "get",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "restaurentList"
    }))
{
        <input type="text" name="searchTerm" />
        <input type="submit" value="Search"/>
}
@使用(Ajax.begin)(
新选择
{
HttpMethod=“get”,
InsertionMode=InsertionMode.Replace,
UpdateTargetId=“restaurentList”
}))
{
}

那么,我的第一个代码有什么问题……请帮助我

为什么不使用ajax.beiginform helper?我不使用ajax.Begin()因为在我的教程中,下一个主题是关于自动完成及其在第一个方法中完成。因此我注意了一些获得该.JS文件控制权的方法。除此之外,我还想了解在MVCI中编码的各个方面,使用Ajax执行上述功能和分页是可能的。BeginForm()是的,使用Ajax表单页面将不会刷新