Charge partielle vue sur le bouton cliquez sur

J'ai compilé tous mes extraits de suggestions dans le balisage qui je pense va obtenir ce dont vous avez besoin. Elle est comme suit.

S'il vous plaît garder à l'esprit que j'ai juste tapé ceci dans le bloc-notes, donc il peut avoir des erreurs de syntaxe, mais la stratégie devrait vous obtenir où vous devez être au.

NB: Nous essayons d'utiliser AJAX technique, nous ne voulons pas vraiment à la publication de la forme, parce que cela va provoquer la totalité de la page pour actualiser, par conséquent, le bouton soumettre a devenir juste un simple bouton.

Donc, notre stratégie consiste à:

• rendu les principaux éléments de formulaire et
• gérer l':
  • l'événement click du bouton ou
  • la liste déroulante événement de changement-- dans ce cas, nous devons omettre le bouton complètement.

Si nous voulons mettre à jour uniquement les résultats après le clic sur le bouton, puis:

Lorsque le bouton est cliqué, on va chercher la vue partielle contenant de la grille de résultats et de remplacer la totalité de l'intérieur HTML dans #viewlist avec le code HTML de la vue partielle.

Nous n'avons pas vraiment besoin de cacher #viewlist. Il nous suffit de le laisser vide, ou afficher certains autres HTML qui contient le texte de notification qu'il n'y a pas de résultats, ou des instructions indiquant à l'utilisateur quoi faire.

Si nous voulons mettre à jour les résultats dès que la valeur dans la liste déroulante est changé, alors:

Nous gardons le changement de gestionnaire de la liste déroulante et d'omettre le gestionnaire d'événements click pour le bouton (le bouton au total).

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

OriginalL'auteur Umar Farooq Khawaja

1. Onclick déclaration en 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');
   }
   });
   }

OriginalL'auteur Shyju Sachin