jquery - हरण - हिंदी में एचटीएमएल परिभाषा




एएसपी एमवीसी 3-पृष्ठ पर नए HTML तत्वों को जोड़ने के लिए आंशिक दृश्य का उपयोग करना (3)

मैं वर्तमान में पृष्ठ पर एक नई सूची आइटम जोड़ने के लिए अपने एएसपी एमवीसी 3 व्यू पर अजाक्स कॉल का उपयोग कर रहा हूं। दृश्य अजाक्स कॉल करता है, जो एक नियंत्रक ViewResult कार्रवाई कॉल करता है, जो आंशिक दृश्य देता है। अजाक्स फिर कॉल करने के लिए सेट किया गया है। कॉल करें <div> तत्व पर कॉल करें।

समस्या यह है कि नई पंक्ति को जोड़ने के बजाय, संपूर्ण दृश्य दूर हो जाता है और केवल आंशिक प्रदर्शित होता है।

दृश्य में कोड यहाँ है यह दृश्य एक अलग मॉडल के एक सूची ऑब्जेक्ट के साथ एक दृश्य मॉडल का उपयोग करता है। कोड का यह भाग सूची वस्तु में प्रत्येक आइटम को प्रदर्शित करने के लिए आंशिक दृश्य कहता है

@model Monet.ViewModel.BankListViewModel
@using (Html.BeginForm())
{
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table>
        <th>State Code</th>
        <th>Agent ID</th>
        <th></th>
            <div class="fixedRows">
                @foreach(var item in Model.Fixed)
                {
                    if (!String.IsNullOrWhiteSpace(item.AgentId))
                    {

                            @Html.Partial("FixedPartialView", item) 

                    }      
                }
            </div>
        </table>
        <br />
        @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
    </fieldset>
}

यहाँ addFixed अजाक्स कॉल है

$("#addFixed").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#fixedRows").append(html); }
    });
    return false;
});

और यह ViewResult नियंत्रक कार्रवाई है कि अजाक्स कॉल

    public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView", new BankListAgentId());
    }

अंत में, यह आंशिक दृश्य है।

@model Monet.Models.BankListAgentId


@using (Html.BeginCollectionItem("Fixed"))
{
    <tr id="[email protected]">
        <td>
            @Html.DropDownListFor(model => model.StateCode,
                (SelectList)ViewBag.StateCodeList, Model.StateCode)
        </td>
        <td>
            @Html.EditorFor(model => model.AgentId)
            @Html.ValidationMessageFor(model => model.AgentId)
        </td>
        <td>
        <a href="#" onclick="$('#[email protected]').parent().remove();" style="float:right;">Delete</a></td>
    </tr>
}

जब एक Add another लिंक Add another चुना गया है तो पेज इस तरह दिखने से चला जाता है

इसके लिए

नीचे दिए गए प्रति टिप्पणियों के लिए पृष्ठ के लिए HTML है:

<input type="hidden" name="Fixed.index" autocomplete="off" value="6dd1b028-14f7-4400-95d1-a803c2521b68" />
        <tr id="item-">
            <td>
                <select id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__StateCode" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].StateCode"><option>AL</option>
<option>AK</option>
<option>AS</option>
<option>AZ</option>

.
.
. <-removed list of all 50 states for clarity
</select>
            </td>
            <td>
                <input class="text-box single-line" id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__AgentId" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].AgentId" type="text" value="" />

            </td>
            <td>
                <a href="#" class="deleteRow">delete</a>
            </td>

        </tr>
                    </section>

संपादित करें

नीचे दिए गए टिप्पणियों को पढ़ने के बाद मैंने तालिका टैग को <table id="fixedRows"> बदल दिया, हालांकि, यह एक ही परिणाम लौट आया मैंने फिर अजाक्स कॉल की success विशेषताओं को बदल दिया ताकि कुछ मूलभूत HTML को इसमें शामिल किया जा सके

success: function (html) { $("#fixedRows").append("<tr><td>New</td></tr>"); }

लेकिन फिर, एक ही परिणाम मिला दृश्य स्टूडियो और क्रोम के डीबगर दोनों में ब्रेकपॉप सेट करने के बाद, मैं यह देख पा रहा था कि अजाक्स को कभी भी फोन नहीं किया जा रहा है। इसके बजाय नियंत्रक की कार्रवाई करने के लिए कॉल किया जाता है, और आंशिक दृश्य को स्वयं पर लोड किया जाता है, इसके बजाय <table id="fixedRows"> जोड़ा जाता है।

फिर भी इसके आस-पास होने के काम, हालांकि, अगर किसी के पास कोई विचार है धन्यवाद!


इसलिए यह कारण हो रहा है घाव हो रहा है बहुत आसान है एक्शनलिंक के कारण जो इस्तेमाल किया जा रहा था, नियंत्रक की कार्रवाई jQuery से पहले आग लग जाती है। यह पूरे Edit दृश्य को मिटा देने के लिए आंशिक दृश्य का कारण बना रहा था। एक $(document).ready भीतर एक हाइपरलिंक के लिए jQuery को बाइंडिंग करके $(document).ready ब्लॉक, jQuery सामान्य की तरह कार्य करता है नीचे टैग और अद्यतन jQuery है

<a href="#" class="addFixed">Add Another</a>

jQuery:

$(document).ready(function () {

    $(".addFixed").click(function () {
        //alert('test');
        event.preventDefault();        
        $.ajax({
            url: '@Url.Action("BlankFixedRow", "BankListMaster")',
            cache: false,
            success: function (html) { $("#fixedRows").append(html); }
        });
    });

    $("#addVariable").click(function () {
        event.preventDefault();
        $.ajax({
            url: '@Url.Action("BlankFixedRow", "BankListMaster")',
            cache: false,
            success: function (html) { $("#variableRows").append(html); }
        });
    });

});

मुझे लगता है कि आपके <table> टैग्स के अंदर jQuery.append भ्रमित है।

इसके बजाय निम्नलिखित की कोशिश करें:

<fieldset>
    <legend>Stat(s) Fixed</legend>
    <table id="fixedRows">
        <tr>
            <th>State Code</th>
            <th>Agent ID</th>
        </tr>
        @foreach(var item in Model.Fixed)
        {
            if (!String.IsNullOrWhiteSpace(item.AgentId))
            {
                @Html.Partial("FixedPartialView", item) 
            }      
        }
    </table>
    <br />
    @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
</fieldset>

नोट, यह भी, कि मैंने id="fixedRows" प्रयोग किया है id="fixedRows" बजाय, जैसा कि आप अपने jQuery में निर्दिष्ट कर रहे हैं।

की तुलना करें:


यह आपके द्वारा प्राप्त कोड के साथ एकमात्र तरीका हो सकता है, यदि वह पृष्ठ सामग्री को उस सरल बिट के साथ नहीं बदले , बल्कि ब्राउज़र टैब में उस ऐक्शन को सीधे लोड कर रहा है। डिफ़ॉल्ट रूप से आपकी एक्शन लिंक क्या करेगी।

  1. सुनिश्चित करें कि "जोड़ें" लिंक के लिए आपके क्लिक हैंडल event.preventDefault() को event.preventDefault() करता है। event.preventDefault() या बस गलत देता है; यदि आप लिंक की डिफ़ॉल्ट कार्रवाई को नहीं रोकते हैं, तो आप AJAX कोड ऐसा करेंगे, और फिर ब्राउज़र सामान्य रूप से लिंक लोड करेगा, ऐसा लग रहा है जैसे यह काम नहीं करता।

  2. सुनिश्चित करें कि पृष्ठ पर कोई JavaScript त्रुटियां नहीं हैं यदि जेएस कार्य करना बंद कर देता है, तो फिर से डिफ़ॉल्ट व्यवहार, फिर से ले जाएगा और आपको दिखाई देने वाला परिणाम प्राप्त होगा।





partial-views