[RESOLVED]Not rendering in <>div> after saving from dialog box

Hi,

I am having a main view as follows

@{
    Layout = null;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-2.1.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="~/css/Admin.css" rel="stylesheet" />

<script type="text/javascript">  
    $(document).ready(function () {
      
        $('#btnbranch').click(function () {
            
            $("#RenderHere").load("@Url.Action("Branch","Branch")",
                                      function (response, status, xhr) {
                                          if (status == "error") {
                                              alert("An error occurred while loading the results.");
                                          }
                                      });
        });
        
    });
    </script>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ADMIN PAGE</title>
</head>
<body style="background-color:#bfd0e4;">
     <table style="width:100%;height:100%;" id="tbl">
          <tr style="vertical-align:top;">
               <td style="width:60%">
                       <div id="RenderHere">
                         
                    </div>
                  </td>
               <td class="middletd">
                    <img src="./Images/blue_overlay.jpg">
                </td>
                <td style="width:60%">
                    <div>  
                        <table style="height:60%">
                            <tr>
                                <button id="btnbranch">BRANCH</button>
                                </br>

                                <button id="apointments"> SOURCE</button>
                            
                            </tr>
                        </table>             
                    </div>
                 <div class="holidayinn"><img src="./Images/holiday_club_logo.png"></div> 
            </td>
        </tr>
    </table>
</body>
</html>

I have 2 panels( left and right ) inside this view and each partial view is loading i the div "RenderHere" whenevr i click the corrresponding buttons in the rhs.

Supppose i have a button"Branch" and it lists all the branch records from db. this contains a link "Edit" and it opens a dialog box to edit the details.The editing is done properly but after saving again the partial view is loading as the whole page  not
in the RHS part of the main page.

My controller function is as follows and i am rendering partial views each time throught his ActionResult.

  public ActionResult Branch()
        {
            model= new TrackerModel();
             // List<BranchModel> filterdBranchData = null; 
              try
              {
                  model.branchData = this.ppiService.GetBranchData();
                 // filterdBranchData = model.branchData.Where(item => item.IsDisabled.Equals(false)).ToList();
               
              }
              catch (Exception ex)
              {
                  logger.Error("error occured", ex);
              }
              return View(model.branchData);
        }

But after saving the edited record, its  showing as the full page not in right hand side panel of the main page.

Pls  help me

Vidya

You need to use Ajax call for this to load a part of the page

can u please give me an example

First, How r u calling action Branch()?.

What are doing in button clicks?

Hi Vidya,

For this issue, I suggest that you could use AJAX form directly to avoid refresh the whole page.

# Html.BeginForm() vs Ajax.BeginForm()

http://www.codeproject.com/Articles/429164/Html-BeginForm-vs-Ajax-BeginForm-in-MVC

You also could use jQuery AJAX to achieve that.

# jQuery.ajax()

http://api.jquery.com/jquery.ajax/

Best Regards

Starain

Leave a Reply