在主视图中显示局部视图

Question

我需要知道如何在主视图的特定区域显示部分视图，这是我的源代码 主视图：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>     

部分视图代码是这个：

<img src="@Url.Action("WebAppView")" />

我得到了那些控制器：

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

我的问题是返回的图像显示在整个视图中，而不是在我指定的 div 区域中。我需要在左侧 div 区域中渲染它 谢谢你

Answer 1

尝试改变

  public ActionResult WebAppView()
  {
     return View();
  }

进入

public ActionResult WebAppView()
    {
        return PartialView();
    }

Answer 2

@Html.Partial("_DisplayImage") 应该直接调用局部视图而不是通过控制器。

您的意思是使用@Html.RenderAction() 来调用Action 方法吗？如果是这样，您的操作方法将返回 view("_DisplayImage") 结果，而不是应该返回的 PartialView("_DisplayImage")。