[RESOLVED]Load partial view on the right hand side panel of the main view

HI ,

I am having a main view,, which is divided into 2 sections. Leftpanel with links and right panel with a div.

When i click each link in the left side menu it should render the corresponding partial view in the div in the right side panel.

PLease find my code

Main page

@{
    Layout = null;
}
<link href="~/css/Admin.css" rel="stylesheet" />
<!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%;">
          <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="doctors">Doktori</button>
                                <button id="apointments"> Pregledi</button>
                            
                            </tr>
                        </table>             
                    </div>
                 <div class="holidayinn"><img src="./Images/holiday_club_logo.png"></div> 
            </td>
        </tr>
    </table>
</body>
</html>

Here two buttons are there.

I am having a partial view named _branchpartial.Its a partial view which lists some data from the db which again pouplates modal dialogs.

But here when i clcik the first button it should display this partial view(_branchpartial) in the div "RenderHere". And i need to pass the model also.

In the controller i have already written Actionresult and created partial view as follows

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);
        }

Please help me to find a solution. I need to open the partial view in the div when i click the first button.

Can i use ajax method? if so how?

How can i call the Action "Branch"  from the button?

Thanks,

Vidya

Please take a look at Ajax.ActionLink. It solves your problem

Ajax.ActionLink and Html.ActionLink in MVC  (please scroll to the middle of the page)

Leave a Reply