locked
How to use Ajax to return a partial view and a viewbag value which is not inside of partialview? RRS feed

  • Question

  • User-1651604128 posted

    Hi,

    I have a asp.net mvc razor view with the following codes:

    ...

    <td colspan="2"><input type="text" name="txtTransCode" id="txtTransID" value="@ViewBag.txtTrans1" /></td>

    ….

    <div id="dvLeft" style="text-align:left; background-color: #E1E5E9; margin-top: 0px; border: solid 1px #E1E5E9;

    </div>

    ….

    <td><input type="button" id="cmdUpdateButton" value="Update" class="btn btn-primary btn-sm" title="Update" /> </td>

    When the view is opened, the text field of "txtTransID" will be filled with @ViewBag.txtTrans1 from the controller, and there is nothing displayed in the <div id="dvLeft"> below it.

    but When the Update button "cmdUpdateButton" is clicked, it will do an ajax call and return a partial view (a webgrid) to the above div of "dvLeft",

    //new updated data

    ViewBag.txtTrans1

    return PartialView(PartialViewstr, ViewBag.webGridData);

    and it also get the new value of  @ViewBag.txtTrans1 and the txtTransID is also needed to updated, since the txtTransID text field is outside of the "dvLeft", so I can not return the @ViewBag.txtTrans1  and update it.

    Can anybody help me out this problem? thanks a lot,

    Sunday, August 2, 2020 5:08 PM

Answers

  • User1686398519 posted

    Hi Peter Cong,

    The lifetime of ViewBag only starts and ends in the current request.You can get the new value by requesting an action, and then use jquery to modify the value of txtTransID.

    I made a simple example, please refer to it.

    Controller

            public ActionResult Index()
            {
                ViewBag.txtTrans1 = "testIndex";
                return View();
            }
            public ActionResult PartialViewTest()
            {
                return PartialView("PartialViewTest",ViewBag.webGridData);
            }
            public ActionResult ChangetxtTrans1()
            {
                return Json("testIndexnew",JsonRequestBehavior.AllowGet);
            }

    Index

    <table>
        <tr>
            <td colspan="2"><input type="text" name="txtTransCode" id="txtTransID" value="@ViewBag.txtTrans1" /></td>
        </tr>
    </table>
    <div id="dvLeft" style="text-align:left; background-color: #E1E5E9; margin-top: 0px; border: solid 1px #E1E5E9;">
    </div>
    <input type="button" id="cmdUpdateButton" value="Update" class="btn btn-primary btn-sm" title="Update" />
    @section scripts{
        <script>
            $("#cmdUpdateButton").click(function () {
                $.ajax({
                    url: "@Url.Action("PartialViewTest")",
                    type:"GET",
                    success: function (data) {
                        ChangetxtTrans1();
                        $("#dvLeft").html(data);
                    }
                });
    
            });
            function ChangetxtTrans1() {
                $.ajax({
                     url: "@Url.Action("ChangetxtTrans1")",
                     type:"GET",
                     success: function (data) {
                         $("#txtTransID").val(data);
                     }
                });
            }
        </script> 
    }

    PartialViewTest

    this is partial view
    

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 3, 2020 6:20 AM

All replies

  • User475983607 posted

    How to use Ajax to return a partial view and a viewbag value which is not inside of partialview?

    The ViewBag is passed from the controller to a View or PatialVeiw.  If the View or PartialView does nothing with the ViewBag value then the ViewBag is lost forever. 

    Sunday, August 2, 2020 10:27 PM
  • User1686398519 posted

    Hi Peter Cong,

    The lifetime of ViewBag only starts and ends in the current request.You can get the new value by requesting an action, and then use jquery to modify the value of txtTransID.

    I made a simple example, please refer to it.

    Controller

            public ActionResult Index()
            {
                ViewBag.txtTrans1 = "testIndex";
                return View();
            }
            public ActionResult PartialViewTest()
            {
                return PartialView("PartialViewTest",ViewBag.webGridData);
            }
            public ActionResult ChangetxtTrans1()
            {
                return Json("testIndexnew",JsonRequestBehavior.AllowGet);
            }

    Index

    <table>
        <tr>
            <td colspan="2"><input type="text" name="txtTransCode" id="txtTransID" value="@ViewBag.txtTrans1" /></td>
        </tr>
    </table>
    <div id="dvLeft" style="text-align:left; background-color: #E1E5E9; margin-top: 0px; border: solid 1px #E1E5E9;">
    </div>
    <input type="button" id="cmdUpdateButton" value="Update" class="btn btn-primary btn-sm" title="Update" />
    @section scripts{
        <script>
            $("#cmdUpdateButton").click(function () {
                $.ajax({
                    url: "@Url.Action("PartialViewTest")",
                    type:"GET",
                    success: function (data) {
                        ChangetxtTrans1();
                        $("#dvLeft").html(data);
                    }
                });
    
            });
            function ChangetxtTrans1() {
                $.ajax({
                     url: "@Url.Action("ChangetxtTrans1")",
                     type:"GET",
                     success: function (data) {
                         $("#txtTransID").val(data);
                     }
                });
            }
        </script> 
    }

    PartialViewTest

    this is partial view
    

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 3, 2020 6:20 AM