这个问题可能会重复,但我有一些问题.我的页面中有一个下拉列表和搜索按钮.我在更改事件的下拉列表中使用模型绑定视图.当点击搜索按钮时,在下拉列表中选择的关于记录列表的值将在局部视图中显示.这一切都正确完成如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MDLNoDDLIndex
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
//script for binding drop down list value from view to model
$("#viewlist").hide();
function TestFun()
{
var mdlno = $("#ddlMDLNo").val();
var txtmdlno = document.getElementById("Request_For_Id");
txtmdlno.value = mdlno;
//alert(txtmdlno.value);
$("#viewlist").hide();
}
var mdlno = $("#ddlMDLNo").val();
function Datalist(mdlno) {
$("#viewlist").show();
$.ajax({
url: "/Search/MDLNoDataList",//url or controller with action
type: "POST",data: mdlno,dataType: "html",success: function (data) {
$("#viewlist").html(data); //target div id
},error: function () {
alert("No Projects Found");
$("#viewlist").html('there is error while submit');
}
});
}
//$(function () { $("#btnclick").click(function () { $("#viewlist").load('/Search/MDLNoDataList') }); });
//script for loading partial view into div tag "viewlist"
</script>
<div>
<h2>Search by MDLNo</h2>
<% using (Html.BeginForm())
{ %>
<%: Html.ValidationSummary(true,"Profile Updation was unsuccessful. Please correct the errors and try again.") %>
Select MDLno
<%= Html.DropDownList("ddlMDLNo",ViewData["MDLno"] as SelectList,"--Select One--",new { onchange = "TestFun()" })%>
<%: Html.HiddenFor(model => model.Request_For_Id) %>
<input type="submit" value="search" name="SearchMDLNo" id="btnclick" onclick ="Datalist(a)"/>
<div id="viewlist"><%Html.RenderAction("MDLNoDataList"); %> </div> <%--partial view should be loaded here.--%>
<% } %>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
一切正常但是..在点击搜索按钮之前显示div标签的局部视图.我想要..当我点击按钮时局部视图加载
为此,我尝试了这段代码：
$("#btnclick").click(function () { $("#viewlist").load('/Search/MDLNoDataList.ascx') });
我也尝试过.show()和.hide(),但问题是..每当我点击按钮整页都会刷新,所以..加载部分视图没有正确完成.
控制器：
public ActionResult MDLNoDDLIndex()
{
ViewData["MDLno"] = new SelectList(CRMSearchReportDL.getAllMDLno(),"Request_For_Id","Request_For_Id");
return View();
}
[HttpPost]
public ActionResult MDLNoDDLIndex(CRM_Doctor_Request model)
{
ViewData["MDLno"] = new SelectList(CRMSearchReportDL.getAllMDLno(),"Request_For_Id");
//mdlnoObj = SearchMDLNoDL.getMDLData(model.Request_For_Id);
return View();
}
public ActionResult MDLNoDataList()
{
List<CRM_Doctor_Request> drlist = new List<CRM_Doctor_Request>();
return PartialView(drlist);
}
[HttpPost]
public ActionResult MDLNoDataList(CRM_Doctor_Request model)
{
return PartialView(CRMSearchReportDL.getMDLNoWiseDetails(model.Request_For_Id));
}
解决方法
我已将我的所有建议片段编译成标记,我认为它会为您提供所需的内容.它如下.
请记住,我刚刚在记事本中键入了这个,因此它可能有语法错误,但策略应该可以让你到达你需要的位置.
注意：我们正在尝试使用AJAX技术,因此我们不想回发表单,因为这会导致整个页面刷新,因此,提交按钮必须只是一个简单的按钮.
所以我们的策略是：
>渲染主要表单元素和
>处理任何一个：
>按钮单击事件或
>下拉更改事件 – 在这种情况下,我们必须完全省略按钮.
如果我们只想在单击按钮后更新结果,则：
单击该按钮时,我们将获取包含结果网格的部分视图,并将#viewlist中的整个内部HTML替换为部分视图的HTML.
我们真的不需要隐藏#viewlist.我们可以将其留空,或者显示一些其他HTML,其中包含没有结果的通知文本,或者说明告诉用户该做什么的说明.
如果我们想在下拉列表中的值更改后立即更新结果,那么：
我们保留下拉列表的更改处理程序,并省略按钮的单击处理程序(以及完全按钮).
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
MDLNoDDLIndex
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div>
<h2>Search by MDLNo</h2>
<% using (Html.BeginForm()) { %>
<%: Html.ValidationSummary(true,"Profile Updation was unsuccessful. Please correct the errors and try again.") %>
Select MDLno
<%= Html.DropDownList("ddlMDLNo","--Select One--" }) %>
<%: Html.HiddenFor(model => model.Request_For_Id) %>
<!-- delete this line if you decide to keep the dropdown change event handler and omit the button click event handler -->
<input id="btnclick" name="SearchMDLNo" type="button" value="search" />
<div id="viewlist">
<!-- this partial view should return the result grid or should return an element stating either "No data" or some instructions -->
<%: Html.Action("MDLNoDataList") %>
</div>
<% } %>
</div>
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-migrate-1.0.0.js"></script>
<script type="text/javascript">
// NOTE : the document ready handler looks like this:
// $(function () {
// code placed here waits for the DOM to fully load before it is executed
// this is very important so as to avoid race conditions where sometimes the code
// works but other times it doesn't work,or varies from browser to browser or
// based on connection speed
// });
$(function () {
// NOTE : keep ONLY one of either $('#ddlMDLNo').change(...) or $('#btnclick').click(...)
// attach the change event handler in an unobtrusive fashion,rather than directly on
// the DOM element
$('#ddlMDLNo').change(function () {
var mdlno = $('#ddlMDLNo').val();
$.ajax({
url: "/Search/MDLNoDataList",type: "POST",data: {
mdlno: mdlno
},success: function (data) {
$("#viewlist").html(data);
},error: function () {
alert("No Projects Found");
$("#viewlist").html('An error has occurred');
}
});
});
// attach the click event handler in an unobtrusive fashion,rather than directly on
// the DOM element
$('#btnclick').click(function () {
var mdlno = $('#ddlMDLNo').val();
$.ajax({
url: "/Search/MDLNoDataList",error: function () {
alert("No Projects Found");
$("#viewlist").html('An error has occurred');
}
});
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。