locked
Using ViewBag / Viewdata in Partial View RRS feed

  • Question

  • User-1961814522 posted

    Hi,

    I have a scenario wherein I am opening a partial view as modal pop (using bootstrap /jquery) after form submission success /failure cases.

    I have tried to pass message for modal pop i.e partialview with tempdata and it works fine.

    I am trying to pass messages with viewbag /viewdata. But I am not getting the data in partialview. Is there a way to get the viewbag / viewdata in partial view other than using tempdata.

    Thanks,

    Ashvin

    Wednesday, May 27, 2020 5:37 PM

Answers

  • User1686398519 posted

    Hi,  ashvinvee

    I made an example with ajax request, ViewBag has data.I think you need to check the logic of your code to see if a redirect operation has occurred after requesting "CheckModalPopUp".ViewBag only applies to the current request. If redirection occurs, its value will be null.

    Remarks: Please refer to the link about Differences Between ViewData, ViewBag and TempData.

     Controller

     public ActionResult Index()
    {
    return View();
    }
    [HttpPost] public ActionResult SubmitTest() { return View("Index"); }
    public ActionResult PartialViewTest() { ViewBag.NotificationHeader = "Success !"; return PartialView("UserNotifications"); }

    View

    @{
        ViewBag.Title = "Home Page";
    }
    @using (Ajax.BeginForm("SubmitTest", "Home", null,
             new AjaxOptions
             {
                 HttpMethod = "Post",
                 OnSuccess = "success",
             }))
    {
       <input type="submit" value="SUBMIT" class="btn btn-primary btn-block" />
    }
    <div id="testmodal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
    
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
    @section scripts{
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script>
            function success() {
                $.ajax({
                    url: 'PartialViewTest',
                    success: function (data) {
                        $(".modal-dialog").html(data);
                        $('#testmodal').modal('show');
                    }
                });
            }
        </script>
    }

    UserNotifications

    <div class="modal-content">
    <div class="modal-body">
    <div class="alert alert-dismissible alert-success">
    <strong>Success !</strong>
    @ViewBag.NotificationHeader
    </div>
    </div>
    </div>

    Here is the result.



    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 28, 2020 3:45 AM

All replies

  • User475983607 posted

    I am trying to pass messages with viewbag /viewdata. But I am not getting the data in partialview. Is there a way to get the viewbag / viewdata in partial view other than using tempdata.

    ViewBag and TempData exist on the web server.  The usual cause for this symptom is returning JSON and not a partial view from an AJAX or fetch request.  We cannot see you code so it is hard to provide an accurate solution.

    Wednesday, May 27, 2020 5:50 PM
  • User-1961814522 posted

    Hi mgebhard,

    I am sharing the code

    Below is the razor syntax for partial view (i.e UserNotifications.cshtml) . I am trying to show Viewbag message in this partial view

                 <div class="modal-content">
                    <div class="modal-body">
                        <div class="alert alert-dismissible alert-success">
                            <strong>Success !</strong>
                     
                          // << To Show Viewbag Message ! >>
                       
                        </div>
                    </div>
                </div>
      

    This is my Controller code which returns partialview, here is where i am assigning the value for viewbag

     public ActionResult CheckModalPopUp()
            {
    
                ViewBag.NotificationHeader = "Success !";
                return PartialView("UserNotifications");
    
            }

    Thanks,

    Ashvin

    Wednesday, May 27, 2020 6:29 PM
  • User475983607 posted

    You are not using the ViewBag in the Partial View.

     <div class="modal-content">
        <div class="modal-body">
            <div class="alert alert-dismissible alert-success">
                <strong>@ViewBag.NotificationHeader</strong>     
            </div>
        </div>
    </div>

    Secondly, you have not shared the client code.  The other issue we see often on the forum is returning a partial successfully from AJAX but not writing code to update the web page.

    Wednesday, May 27, 2020 7:10 PM
  • User1686398519 posted

    Hi,  ashvinvee

    I made an example with ajax request, ViewBag has data.I think you need to check the logic of your code to see if a redirect operation has occurred after requesting "CheckModalPopUp".ViewBag only applies to the current request. If redirection occurs, its value will be null.

    Remarks: Please refer to the link about Differences Between ViewData, ViewBag and TempData.

     Controller

     public ActionResult Index()
    {
    return View();
    }
    [HttpPost] public ActionResult SubmitTest() { return View("Index"); }
    public ActionResult PartialViewTest() { ViewBag.NotificationHeader = "Success !"; return PartialView("UserNotifications"); }

    View

    @{
        ViewBag.Title = "Home Page";
    }
    @using (Ajax.BeginForm("SubmitTest", "Home", null,
             new AjaxOptions
             {
                 HttpMethod = "Post",
                 OnSuccess = "success",
             }))
    {
       <input type="submit" value="SUBMIT" class="btn btn-primary btn-block" />
    }
    <div id="testmodal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
    
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
    @section scripts{
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script>
            function success() {
                $.ajax({
                    url: 'PartialViewTest',
                    success: function (data) {
                        $(".modal-dialog").html(data);
                        $('#testmodal').modal('show');
                    }
                });
            }
        </script>
    }

    UserNotifications

    <div class="modal-content">
    <div class="modal-body">
    <div class="alert alert-dismissible alert-success">
    <strong>Success !</strong>
    @ViewBag.NotificationHeader
    </div>
    </div>
    </div>

    Here is the result.



    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 28, 2020 3:45 AM
  • User-1961814522 posted

    Thanks YihuiSun,

    It worked like a charm.

    Ashvin

    Thursday, May 28, 2020 11:44 AM