मान लीजिए मेरे पास 3 आंशिक विचार हैं, जो सभी एक ही मॉडल में लेते हैं और इसी तरह एक ही समय में प्रस्तुत/अद्यतन किया जाना चाहिए। अर्थात।

<div id="Partial_view1">
    @{ await Html.RenderPartialAsync("partialview1", Model); }
</div>
<div class="Partial_view2">
    @{ await Html.RenderPartialAsync("partialview2", Model); }
</div>
<div class="Partial_view3">
    @{ await Html.RenderPartialAsync("partialview3", Model); }
</div>

वर्तमान में, जब मैं jQuery और AJAX के साथ आंशिक दृश्य अपडेट करना चाहता हूं, तो मैं सामान्य रूप से निम्न फ़ंक्शन को क्रमशः पैरेंट div, url और संभावित रूप से एक आईडी के साथ कॉल करता हूं:

var updatePartialView = function (url, data, hook) {
    $.ajax({
        url: url,
        type: 'GET',
        data: data,
        success: function (response) {
            hook.html(response);
        }
    });
}

कुछ इस तरह दिख सकता है:

helper.updatePartialView('/Controller', 2, $('#Partial_view1'))

नियंत्रक तब सामान्य रूप से आंशिक दृश्य परिणाम लौटाएगा, जहां स्वाभाविक रूप से आंशिक दृश्य और मॉडल लौटाया जाता है, जिसे मैं आंशिक दृश्य के युक्त div के नीचे घोंसला करता हूं।

//From controller
return PartialView("partialview1", Model);

मैं अपने सर्वर की ओर पेलोड को कम करना चाहता हूं, इस प्रकार मुझे लगभग 3 समान कॉल करने में कोई दिलचस्पी नहीं है .. इसलिए मैं क्यों समझना चाहता हूं, अगर कोई ऐसा तरीका है जिससे मैं नियंत्रक से मॉडल प्राप्त कर सकता हूं, और फिर jQuery में 3 आंशिक विचारों को पॉप्युलेट करें।

अग्रिम में धन्यवाद

0
Jeppe Christensen 9 सितंबर 2020, 00:10

1 उत्तर

सबसे बढ़िया उत्तर

चूंकि आपके तीन आंशिक दृश्य एक ही पृष्ठ में हैं, इसलिए आप return PartialView("PartialViewName",model) का उपयोग करने के बजाय मुख्य पृष्ठ को अपडेट किए गए मॉडल के साथ अपडेट करने के लिए केवल return View("MainPage",model) का उपयोग करें।

लेकिन इस तरह से एक नुकसान है, अगर आप अपने रेजर व्यू में लेआउट का उपयोग करते हैं। यह बार-बार नेवबार प्रदर्शित करेगा।

अनुक्रमणिका.cshtml:

@model IEnumerable<Test>
<div id="view_all">
    <div id="Partial_view1">
        @{ await Html.RenderPartialAsync("partialview1", Model); }
    </div>
    <div class="Partial_view2">
        @{ await Html.RenderPartialAsync("partialview2", Model); }
    </div>
    <div class="Partial_view3">
        @{ await Html.RenderPartialAsync("partialview3", Model); }
    </div>
    <input type="button" onclick="Update()" value="Update" />
</div>
@section Scripts
{
    <script>
        function Update() {
            updatePartialView('/Home/Update', 2)
        }    
        var updatePartialView = function (url, data) {
            $.ajax({
                url: url+"?id="+data,
                type: 'GET',
                success: function (response) {
                    $('#view_all').html(response);
                }
            });
        }
    </script>
}

नियंत्रक:

public class HomeController : Controller
{
    private List<Test> model = new List<Test>()
        {
            //....
        };

    public IActionResult Index()
    {
        return View(model);
    }
    public IActionResult Update(int id)
    {
        //change the model by yourself
        var test2 = model.Where(a=>a.Id==id).FirstOrDefault();
        test2.Number = 9;
        model[0].Test1.Category = "aaaaaaaa";
        model[2].Test2.Age = "34343434";

        return View("Index", model);
    }
}

दूसरा विकल्प मुझे लगता है कि आप एक RenderRazorViewToString फ़ंक्शन को कस्टम कर सकते हैं जो दृश्य को स्ट्रिंग में पार्स कर सकता है और नीचे की तरह किया:

आदर्श:

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Number { get; set; }
    public Test1 Test1 { get; set; }        
    public Test2 Test2 { get; set; }        
}
public class Test1
{
    public string Category { get; set; }
}
public class Test2
{
    public string Age { get; set; }
}

अनुक्रमणिका.cshtml:

@model IEnumerable<Test>
//...
<input type="button" onclick="Update()" value="Update" />

@section Scripts
{
    <script>
        function Update() {
            updatePartialView('/Home/Update', 2)
        }
        
        var updatePartialView = function (url, data) {
            $.ajax({
                url: url+"?id="+data,
                type: 'GET',
                success: function (response) {
                    $('#Partial_view1').html(response.view1);
                    $('.Partial_view2').html(response.view2);
                    $('.Partial_view3').html(response.view3);
                }
            });
        }
    </script>
}

आंशिकदृश्य1.cshtml:

@model IEnumerable<Test>
<h1>Test</h1>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Number)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Number)
                </td> 
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>               
            </tr>
        }
    </tbody>
</table>

Partialview2.cshtml:

@model IEnumerable<Test>
<h1>Test1</h1>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Test1.Category)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Test1.Category)
                </td>
            </tr>
        }
    </tbody>
</table>

Partialview3.cshtml:

@model IEnumerable<Test>
<h1>Test2</h1>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Test2.Age)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Test2.Age)
                </td>
            </tr>
        }
    </tbody>
</table>

नियंत्रक:

public IActionResult Update(int id)
{
    //change your model by yourself
   
    //pass the updated model to the partial view
    var view1 = Helper.RenderRazorViewToString(this, "partialview1", model);
    var view2 = Helper.RenderRazorViewToString(this, "partialview2", model);
    var view3 = Helper.RenderRazorViewToString(this, "partialview3", model);
    return Json(new { view1 = view1, view2 = view2, view3 = view3 });
}

RenderRazorViewToString विधि:

public class Helper
{
    public static string RenderRazorViewToString(Controller controller, string viewName, object model = null)
    {
        controller.ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            IViewEngine viewEngine =
                controller.HttpContext.RequestServices.GetService(typeof(ICompositeViewEngine)) as
                    ICompositeViewEngine;
            ViewEngineResult viewResult = viewEngine.FindView(controller.ControllerContext, viewName, false);

            ViewContext viewContext = new ViewContext(
                controller.ControllerContext,
                viewResult.View,
                controller.ViewData,
                controller.TempData,
                sw,
                new HtmlHelperOptions()
            );
            viewResult.View.RenderAsync(viewContext);
            return sw.GetStringBuilder().ToString();
        }
    }
}

नतीजा: यहां छवि विवरण दर्ज करें

वैसे, तीनो पाटीदार विचार एक ही मॉडल पर निर्भर करते हैं, आपने उन्हें एक आंशिक दृष्टिकोण के रूप में एक साथ क्यों रखा?

0
Rena 9 सितंबर 2020, 09:26