Question

我知道这个问题可能会重演。但我的问题是，我希望我的部分视图显示在按钮点击同一页面到div标签后。当我点击按钮部分视图正在显示但不在div标签的同一页面上，但它在不同页面上打开。这是我的代码：

<%@ 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
        function TestFun() 
        {
            var mdlno = $("#ddlMDLNo").val();
            var txtmdlno = document.getElementById("Request_For_Id");
            txtmdlno.value = mdlno;
            //alert(txtmdlno.value);
        }

        //script for loading partial view into div tag "viewlist"
        $(function () {
            $('form').submit(function () {
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        beforeSend: function () {
                            $("#viewlist").hide();
                        },
                        complete: function () {
                            $("#viewlist").show();
                        },
                        success: function (result) {
                            $("#viewlist").html(result);
                        }
                    });
                }
                return false;
            });
        });

</script>
<div>
<h2>Search by MDLNo</h2>

    <% using (Html.BeginForm("MDLNoDataList", "Search", FormMethod.Post, new { id = "form1" }))
    { %>

         <%: 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" />    
            <div id="viewlist"></div> // partial view should be loaded here.
    <% } %> 

</div>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

Answer 1

试试这样：

$("#btnclick").click(function(){
    $("#viewlist").load("your url here");
});

希望有所帮助

Answer 2

Html.BeginForm会发回整页。

请考虑使用 Ajax.BeginForm 。 Ajax.BeginForm接受 AjaxOptions 类型的参数，该类型具有名为 OnSuccess 的属性。

您可以为 OnSuccess 提供javascript函数以获取结果并将其显示在div中

Answer 3

目前，表单仍在提交并发回服务器，这就是您在新页面中部分加载的原因。

您需要在提交事件处理程序的顶部使用preventDefault（）来阻止帖子的发生。

因此...

$('form').submit(function (e) {

            //prevent form post
            e.preventDefault();

            // ajax stuff here

将部分视图加载到同一页面上的div标签中

3 个答案: