Asp.net mvc 4 在MVC4中获取数据而不刷新页面的Ajax代码
我正在使用vs2010。下面的程序需要从数据库中获取数据并进行渲染,而不刷新页面。但当我输入一些名称并单击搜索按钮时,下面的程序总是刷新页面 Index.cshtmlAsp.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
@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表单页面将不会刷新