Загрузить частичный вид при нажатии кнопки

Question

Этот вопрос может повторяться, но у меня есть проблема. У меня есть раскрывающийся список и кнопка поиска на моей странице. где я связываю представление с моделью в выпадающем списке события изменения. И при нажатии на значение кнопки «Поиск», выбранное в выпадающем списке, относящемся к списку записей, отображается на частичном изображении. Это все сделано правильно, как ниже:

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

Все работает правильно, но .. частичный вид сНу тега показывает, прежде чем нажать на кнопку Поиск. Я хочу, чтобы .. Частичный вид нагрузки, когда я нажимаю на кнопку

для этого я попробовал этот код:

$("#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", "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

Я собрал все мои фрагменты предложений в разметке, что я думаю, что получите, что вам нужно. Это так.

Пожалуйста, имейте в виду, что я только что напечатал это в Блокноте, чтобы он мог иметь синтаксические ошибки, но стратегия должна обеспечить вас, где вам нужно быть.

NB: Мы пытаемся использовать технику AJAX, так мы не очень хотим форму обратной передачи, потому что заставит всю страницу, чтобы обновить, поэтому кнопка отправки должна стать просто обычная кнопка.

Таким образом, наша стратегия заключается в следующем:

• делают основные элементы формы и
• обрабатывать либо:
  • события щелчка кнопки или
  • изменения выпадающего event-- в этом случае мы должны полностью опустить кнопку.

Если мы хотим обновить результаты только после того, как кнопка нажата, то:

Когда кнопка нажата, мы забираем частичное представление, содержащее сетку результатов и заменить весь внутренний HTML в #viewlist с 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", 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 в HtmlBegin форму, как следующее:

<% 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. заявление в 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

Ваш #btnclick является submit кнопку. Таким образом, когда вы нажимаете на нее, это приведет к обратной передаче. Вот почему вся ваша страница освежает. Измените его на button, и это остановит обновление всей страницы.

- Игнорирование отсюда -

Во-вторых, #viewlist должны быть скрыты, чтобы начать с того, если я правильно вас понял. Вы можете сделать это, установив его display: none следующим образом:

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

Тогда в вашем TestFun, когда вам нужно, чтобы показать #viewlist как так:

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 
} 

- Игнорировать ДО здесь -

Я думаю, что ваша основная проблема в том, что ваша кнопка имеет тип submit.

Update:

Вы не можете использовать $('#viewlist').load(...), так как метод управления, который возвращает частичный вид отмечен [HttpPost]. Используйте следующие вместо:

$.ajax({ 
    url: "/Search/MDLNoDataList" 
    type: "POST", 
    data: { 
     // NOTE : you will need to provide querystring items here 
     // according to the properties in CRM_Doctor_Request so that 
     // these parameters get bound to CRM_Doctor_Request by the 
     // DefaultModelBinder. If you paste the code for CRM_Doctor_Request 
     // I can let you know what to put in here. 
    }, 
    dataType: "html", 
    success: function (response) { 
     $("#viewlist").html(response); 
    }, 
    error: function() { 
     alert("No Projects Found"); 
     $("#viewlist").html('No results.'); 
    } 
});