我的索引视图是
@model IEnumerable<W.Models.Abc
@using (Ajax.BeginForm("getAbcListA", "Home", new AjaxOptions { UpdateTargetId = "AbcDetails" }))
{
<b>Search By:</b>@Html.RadioButton("Searchby", "Name", true, new { style = "width:20px;" }) <text>Name</text>
@Html.RadioButton("Searchby", "Id", new { style = "width:20px;" }) <text>ID</text>
@Html.TextBox("Search") <input type="submit" value="Search" class="Searchbtn"/>
}
<div id="AbcDetails" style="width: 35%; height: 130px; display:none;">
</div>
我的java脚本文件是
$(document).ready(function () {
$.ajax({
url: '/Home/getAbcList',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
.success(function (result) {
$('#AbcDetails').show();
$('#AbcDetails').html(result);
})
.error(function (xhr, status) {
alert('from function');
});
$(".Searchbtn").click(function () {
$("#AbcDetails").hide();
});
});
我的控制器是
public ActionResult getAbcList()
{
var obj = repository.Searchlist();
return View("_getAbcList",obj);
}
和第二个函数(由Ajax形式调用)是
public ActionResult getAbcListA(string a, string b)
{
var obj = repository.Searchlist(a,b);
return View("_getAbcList",obj);
}
我的部分观点是
@model IEnumerable<W.Models.Abc>
@{
WebGrid grid = new WebGrid(Model,
columnNames: new[] { "FirstName", "SurName", "Date", "Address", "PostCode", "ContactNumber" }
, defaultSort: "FirstName"
, rowsPerPage: 15
, canPage: true
// canSort: true
);
}
问题是当页面第一次加载时它不显示局部视图并发送我在方法中定义的错误(来自函数)。即使我在索引视图中渲染局部视图
<div id="AbcDetails" style="width: 35%; height: 130px; display:none;">
@{Html.RenderPartial("~/Views/Home/_getAbcList.cshtml");}
</div>
然后局部视图显示数据,但网格沿着页脚标记向下(主体和页脚内容显示为网格背景)。 我想在页面首次加载时通过ajax加载数据,当用户点击按钮时,应显示部分视图我知道我必须定义另一个显示的div和当前要隐藏的div ....请帮助... ..
答案 0 :(得分:0)
而不是:
$.ajax({
url: '/Home/getAbcList',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
.success(function (result) {
$('#AbcDetails').show();
$('#AbcDetails').html(result);
})
喜欢:
$.ajax({
url: '@Url.Action("getAbcList","Home")',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
success:function (result) {
$('#AbcDetails').show();
$('#AbcDetails').html(result);
}
})