Load Teilansicht auf Schaltfläche klicken

Question

Diese Frage könnte wiederholt werden, aber ich habe ein Problem. Ich habe eine Dropdown-Liste und einen Suchknopf auf meiner Seite. Hier binden Sie die Ansicht mit dem Modell in der Dropdown-Liste des Änderungsereignisses ein. Und wenn Sie auf "Suchen" klicken, wird der ausgewählte Wert in der Dropdown-Liste bezüglich der Liste der Datensätze in der Teilansicht angezeigt. Dies alles richtig als Gebrüll getan:

<%@ 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> 

Alles funktioniert einwandfrei, aber .. Teilansicht von div-Tags angezeigt wird, bevor sie auf Suchtaste klicken. Ich möchte, dass .. Die Teilansicht Last, wenn i

für die Aktivierung der Schaltfläche ich diesen Code versucht haben:

$("#btnclick").click(function() { $("#viewlist").load('/Search/MDLNoDataList.ascx') }); 

Und ich habe auch versucht, .show() und .Hide(), aber Problem mit das ist ... Immer wenn ich auf die Schaltfläche klicke, wird die ganze Seite aktualisiert, so dass das Laden der Teilansicht nicht korrekt ausgeführt wird.

Controller:

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", "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)); 
     } 

Answer 1

Ich habe alle meine Schnipsel von Vorschlägen in das Markup kompiliert, dass ich denke, dass Sie bekommen, was Sie brauchen. Es ist wie folgt.

Bitte beachten Sie, dass ich dies in Notepad eingegeben habe, so dass es Syntaxfehler haben könnte, aber die Strategie sollte Sie dahin bringen, wo Sie sein müssen.

NB: Wir versuchen, eine AJAX-Technik zu verwenden, so wir denn, dass die gesamte Seite aufzufrischen daher die Submit-Button bewirkt, dass nicht wirklich die Form Postback wollen hat nur eine werden Knopf.

So ist unsere Strategie ist:

• die wichtigsten Formelemente machen und
• behandeln die entweder:
  • die Schaltfläche Click-Ereignis oder
  • die Drop-Down-Änderung event-- in diesem Fall wir müssen den Knopf ganz weglassen.

Wenn wir wollen, um die Ergebnisse aktualisieren, erst nachdem die Schaltfläche geklickt wird, dann gilt:

Wenn die Schaltfläche geklickt wird, wir die Teilansicht mit dem Raster der Ergebnisse holen und ersetzen die gesamte innere HTML in #viewlist mit dem HTML für die Teilansicht.

Wir brauchen nicht wirklich zu verstecken #viewlist. Wir können es einfach leer lassen oder einen anderen HTML-Code anzeigen, der Benachrichtigungstext enthält, bei dem keine Ergebnisse angezeigt werden, oder Anweisungen, die dem Benutzer mitteilen, was zu tun ist.

Wenn wir die Ergebnisse, sobald der Wert in der Dropdown-Liste aktualisieren möchten geändert wird, dann:

Wir halten die Änderung Handler für das Drop-Down-und lassen Sie den Click-Handler für die Schaltfläche (und die Taste insgesamt).

<%@ 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", ViewData["MDLno"] as SelectList, "--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 
        }, 
        dataType: "html", 
        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", 
        type: "POST", 
        data: { 
         mdlno: mdlno 
        }, 
        dataType: "html", 
        success: function (data) { 
         $("#viewlist").html(data); 
        }, 
        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> 

Answer 2

Script

<script type="text/javascript"> 
$(function() { 
    $('form').submit(function() { 
     if ($(this).valid()) { 
      $.ajax({ 
       url: this.action, 
       type: this.method, 
       data: $(this).serialize(), 
       beforeSend: function() { 

       }, 
       complete: function() { 

       }, 
       success: function (result) { 
        $("#viewlist").html(result); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 
</script> 

HtmlBeginForm Optionen hinzufügen Formular HtmlBegin wie folgt vor:

<% 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" />  
<% } %> 

Answer 3

1. Onclick Anweisung in html

   @item.CategoryName

2. JQuery

   function projectlist(itemid) 
   
       $.ajax({ 
       url: "/Project/Projects"//url or controller with action 
       type: "POST", 
       data: { cid: itemid }, 
       dataType: "html", 
       success: function (response) { 
   
        $("#projectlist").html(response);//target div id 
       }, 
       error: function() { 
        alert("No Projects Found"); 
        $("#result").html('there is error while submit'); 
       } 
       }); 
   } 
   

Answer 4

Ihre #btnclick ist ein submit Taste. Wenn Sie darauf klicken, verursacht dies ein Postback. Deshalb ist Ihre gesamte Seite erfrischend. Ändern Sie den Typ in button und damit wird die gesamte Seite nicht aktualisiert.

- Ignorieren von hier -

Zweitens #viewlist versteckt werden sollte, beginnen, wenn ich Sie richtig verstanden haben. Sie können dies tun, indem sie display: none wie so einstellen:

<div id="viewlist" style="display: none'"> <%Html.RenderAction("MDLNoDataList"); %></div> 

Dann in Ihrem TestFun, wenn Sie #viewlist wie so zeigen müssen:

function TestFun() { 
    var mdlno = $("#ddlMDLNo").val(); 
    var txtmdlno = document.getElementById("Request_For_Id"); 
    txtmdlno.value = mdlno; 
    //alert(txtmdlno.value); 

    $('#viewlist').css('display', ''); // or something similar 
} 

- Ignorieren hier bis -

Ich denke, Ihr Hauptproblem ist, dass Ihre Taste vom Typ submit ist.

Update:

Sie können nicht $('#viewlist').load(...) verwenden, da die Controller-Methode, die die Teilansicht mit neuen [HttpPost] markiert. Verwenden Sie stattdessen Folgendes: