Display partial view in a main View - asp.net-mvc-4

Question

Please I need to know how to display a partial view in a specific area in the main view , this is my source code
Main View: cshtml
<table align="left" border="5px" cellspacing="2px" style="border:2px solid black">
<tr>
<table>
<tr>
<td style="border:2px solid black">
<div style="background-color: #fff; border: 6px solid #ccc; height: 700px; width: 500px; margin: 20px; padding: 20px;" align="center">Select Baseline Image
<input type="button" value="Upload" align="right">
<div style="background-color: #fff; border: 6px solid #ccc; height: 500px; width: 300px; margin: 20px; padding: 20px;" align="center">#Html.Partial("_DisplayImage")</div>
</div>
<form method="POST">
<input id="leftUrlTB" name="URL" type="Text" style="background-color: #fff; border: 6px solid #ccc"/>
<input id="leftBrowser" name="leftBrowser" value="Firefox" type="radio" />Firefox<br>
<input id="leftBrowser" name="leftBrowser" value="Chrome" type="radio" />Chrome<br>
<input id="leftBrowser" name="leftBrowser" value="Internet Explorer" type="radio" />Internet Explorer<br>
<input type="submit" value="Capture" align="right">
</form>
</td>
<td style="border:2px solid black">
<div style="background-color: #fff; border: 6px solid #ccc; height: 700px; width: 500px; margin: 20px; padding: 20px;" align="center">Select Comparison Image
<input type="button" value="Upload" align="right">
<div style="background-color: #fff; border: 6px solid #ccc; height: 500px; width: 300px; margin: 20px; padding: 20px;" align="center"></div></div>
<form method="POST">
<input id="rightUrlTB" name="URL" type="Text" style="background-color: #fff; border: 6px solid #ccc"/>
<input id="rightBrowser" name="leftBrowser" value="Firefox" type="radio" />Firefox<br>
<input id="rightBrowser" name="leftBrowser" value="Chrome" type="radio" />Chrome<br>
<input id="rightBrowser" name="leftBrowser" value="Internet Explorer" type="radio" />Internet Explorer<br>
<input type="submit" value="Capture" align="right">
</form>
</td>
</tr>
</table>
</tr>
<tr>
<td >
<div style="background-color: #fff; border: 6px solid #ccc; height: 700px; width: 1100px; margin: 20px; padding: 20px;" align="center"></div>
</td>
the partial view code is this one :
<img src="#Url.Action("WebAppView")" />
And I got those controllers :
public ActionResult WebAppView()
{
return View();
}
[HttpPost]
public ActionResult WebAppView(string url, string selectedBrowserRadio)
{
selectedBrowserRadio = Request.Form["leftBrowser"];
selectedBrowserRadio = selectedBrowserRadio.Replace(" ", string.Empty);
var selectedBrowser = (Browser)Enum.Parse(typeof(Browser), selectedBrowserRadio, true);
var bmp= ScreenShotter.TakeScreenShot(selectedBrowser, url);
var converter = new ImageConverter();
var bmpArray = (byte[])converter.ConvertTo(bmp, typeof(byte[]));
return File(bmpArray,"image/png");
}
public ViewResult _DisplayImage()
{
return View("_DisplayImage");
}
My problem is that the image returned is displayed in the whole view not in the div area in which I specified. I need to render it in the left div area
thank you

Answer 1

Try changing
public ActionResult WebAppView()
{
return View();
}
into
public ActionResult WebAppView()
{
return PartialView();
}

Answer 2

#Html.Partial("_DisplayImage") should call directly to the partial view and not go through the controller.
Did you mean to use #Html.RenderAction() to call the Action method? and if so your action method is returning a view("_DisplayImage") result and not a PartialView("_DisplayImage") which it should be.