2012-05-12 15 views
21

उद्देश्यAjax.BeginForm एक dropdownlist

के onchange पूरे पृष्ठ की जगह मैं एक साधारण तालिका लिस्टिंग नाम (एक आंशिक दृश्य में), और यह ऊपर एक dropdownlist उन नामों से युक्त। उद्देश्य ड्रॉपडाउन सूची में चयनित नाम के आधार पर तालिका को फ़िल्टर करना है। फ़िल्टरिंग को ड्रॉपडाउन सूची में चयनित मान जैसे ही बदलना चाहिए, और केवल आंशिक दृश्य को फिर से प्रस्तुत करना चाहिए।

समस्या

जब मैं dropdownlist में एक मूल्य का चयन करें, आंशिक दृश्य अन्य दृश्य में गाया नहीं है, बल्कि एक पूरे पृष्ठ के रूप में प्रदर्शित किया जाता है। हालांकि, जब मैं एक मेरी Ajax.BeginForm ब्लॉक में बटन सबमिट करें, और सबमिट बटन पर कार्यवाही प्रारंभ में शामिल हैं, यह समारोह के रूप में उम्मीद है ...

कोड

नियंत्रक

public PartialViewResult Filter(string filterName) { 
    var names = from p in db.People 
       select p; 

    if (!String.IsNullOrEmpty(filterName)) 
    { 
     names = names.Where(p => p.Name.Equals(filterName)); 
    } 

    return PartialView("_PersonsTable", names); 
} 

देखें

@model IEnumerable<Sandbox.Models.Person> 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 

@using (Ajax.BeginForm("Filter", "Person", new AjaxOptions { 
    HttpMethod = "Get", UpdateTargetId = "SearchResults", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace })) 
{ 
    @Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new { onchange = "this.form.submit()" }) 
} 

@Html.Partial("_PersonsTable") 

आंशिक देखें

@model IEnumerable<Sandbox.Models.Person> 

<table id="SearchResults"> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      Age 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.Name) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Age) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id=item.ID }) | 
      @Html.ActionLink("Details", "Details", new { id=item.ID }) | 
      @Html.ActionLink("Delete", "Delete", new { id=item.ID }) 
     </td> 
    </tr> 
} 
</table> 

तो क्यों यह है कि मेरी खोज-तालिका एक आंशिक दृश्य के रूप में प्रदान नहीं किया जाता है?

मैं इन लिपियों मेरी _Layout ध्यान में रखते हुए शामिल किया है:

<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script> 
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script> 

उत्तर

33

अपने ड्रॉपडाउन में बदल देते हैं: साथ

new { onchange = "this.form.submit()" } 

:

new { onchange = "$(this.form).submit();" } 

इसके अलावा सभी MicrosoftAjax*.js स्क्रिप्ट से छुटकारा पाने के। वे पूरी तरह से विरासत हैं और एएसपी.नेट एमवीसी 3 और नए अनुप्रयोगों में उपयोग नहीं किया जाना चाहिए। यदि आप पुराने संस्करणों से माइग्रेट कर रहे हैं तो वे केवल संगतता कारणों के लिए प्रदान किए जाते हैं। jQuery.js और jquery.unobtrusive-ajax.js पर्याप्त हैं।

+0

+1 हाँ .. अच्छा समाधान – shashwat

+2

यह वास्तव में बेवकूफ है .. मैं केवल इस लॉल के लिए 2 घंटे खो गया। धन्यवाद –

0

सुनिश्चित नहीं हैं कि अगर मैं इसे सही ढंग से समझ है, लेकिन अगर सबमिट बटन ठीक से काम करता है क्यों सिर्फ ऐसा नहीं:

@Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new { onchange = "clickMe('mybuttonId')" }) 

और लिखना छोटी लिपि

function clickMe(id) { 
    $('#' + id).click() // where id is id of button that should submit the form. 
} 

यदि आप बटन को प्रदर्शित नहीं करना चाहते हैं तो बस इसे छुपाएं। यह एक हैक है और यदि यह आपकी आवश्यकताओं के अनुरूप नहीं है तो हम आगे की जांच कर सकते हैं।

संबंधित मुद्दे