【问题标题】:getting data from a partial view onto main view从局部视图获取数据到主视图
【发布时间】:2017-11-06 13:21:46
【问题描述】:

我是 ASP.Net MVC 世界的新手,我正在使用一个小型应用程序,该应用程序使用来自 Web 服务的许多 XML 文件作为其模型数据。我有一个 Html 页面,其中包含存储在 XML Web 服务中的所有工具的列表。它们在一个循环中并且是可点击的链接。我还有一个部分视图,它只是一系列文本框。我的目标是用我从单击的工具中获得的信息填充文本框,同时让列表和文本框出现在同一页面上。我已经成功地做到了这一点,但到目前为止,我只能将 id 传递给一个控制器,该控制器将我的部分视图作为一个全新的页面返回。我确信这是一个简单的解决方案,之前可能已经在这里回答过。解决这个问题的最佳方法是什么?下面是我的模型、视图和两个控制器

工具模型

  public class Tool
{
  public int Id { get; set; }
  public string ToolId { get; set; }
  public string Adapter { get; set; }
  public string Description { get; set; }
  public string TNumber { get; set; }
  public List<string> ComponentList { get; set; }
  public List<string> AccessoryList { get; set; }
  public List<KeyValuePair<string, string>> ToolIdDescription { get; set; }
  public List<string> toolList = new List<string>();

}

部分视图控制器

public ActionResult PartialView()
  {
     Tool newTool = new Tool();
     List<string> tools = new List<string>();
     tools = backgroundLoad();
     newTool.ToolIdDescription = new List<KeyValuePair<string, string>>();
     atool.ToolIdDescription = new List<KeyValuePair<string, string>>();
     foreach (string tool in tools)
     {
        newTool.ToolIdDescription = GetToolDescription(tool);
     }

     return View(newTool);
  }

控制器接收数据集

public ActionResult GetDataSet(string id)
  {
     Tool selectedTool = new Tool();
     if (id != null)
     {
        var request = 
(HttpWebRequest)WebRequest.Create("http://localhost/DbService/Tool/" + id);
        XmlDocument xml = new XmlDocument();
        Stream aResponsestream;
        string aResult = "";
        using (aResponsestream = request.GetResponse().GetResponseStream())
        using (StreamReader aReader = new StreamReader(aResponsestream, 
Encoding.UTF8))
        {
           aResult = aReader.ReadToEnd();
           aResponsestream.Close();
        }
        xml.LoadXml(aResult);
        var Description = 
   xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/Description");
        if (Description != null) selectedTool.Description = 
Description.InnerText;
        var Adapter = 
   xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/Adapter/Name");
        if (Adapter != null) selectedTool.Adapter = Adapter.InnerText;
        var TNumber = 
        xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/TNo");
        if (TNumber != null) selectedTool.TNumber = TNumber.InnerText;
        var ToolId = 
        xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/ToolId");
        if (ToolId != null) selectedTool.ToolId = ToolId.InnerText;


        return View(selectedTool);
     }
     else return View();

  }

包含列表的视图

@model  MiniWeb.Models.Tool

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<h2>Tool List</h2>
<div class="table-responsive">
   <table class="table table-hover">
      <thead>
      <tr>
         <th>Id</th>
         <th>Description</th>
      </tr>
      </thead>
      @foreach (var item in Model.ToolIdDescription)
      {

         <tbody>
         <tr>
            <td>@Html.ActionLink(item.Key, "GetDataSet", new { id = item.Key })</td>
            <td>@Html.DisplayFor(modelItem => item.Value)</td>
         </tr>
         </tbody>
      }
   </table>
</div>
</body>
</html>

@Html.Partial("GetDataSet", new MiniWeb.Models.Tool())

显示工具信息的视图

@model MiniWeb.Models.Tool

@{
    ViewBag.Title = "GetDataSet";
}
@{
   ViewBag.Title = "Tool";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<h2>Tool Selection </h2>
<div class="Tool">
   <span id ="id"> 
         @Html.LabelFor(m => Model.ToolId)
         @Html.TextBoxFor(modelItem => Model.ToolId)
   </span>
   <br/>
   <span id="Description">
         @Html.LabelFor(m => Model.Description)
         @Html.TextBoxFor(modelItem => Model.Description)
   </span>
   <br/>
   <span id="Adapter">
         @Html.LabelFor(m=> Model.Adapter)
         @Html.TextBoxFor(modelItem => Model.Adapter)

   </span>
   <br/>
   <span id="Adapter">
         @Html.LabelFor(m => Model.TNumber)
         @Html.TextBoxFor(modelItem => Model.TNumber)
   </span>
   <span> 
      <button> Save </button>
   </span>
</div>

抱歉所有代码,但感谢您阅读。如果这是一个非常简单的解决方案,我也很抱歉。我只是 ASP.Net 的新手,我想开发最佳实践,而不是在上面做黑客工作。谢谢您的帮助。

【问题讨论】:

    标签: c# asp.net ajax asp.net-mvc model-view-controller


    【解决方案1】:

    您将要在局部视图上创建一个表单,将数据提交给主页面控制器。

    您可以在this 文章中找到更多信息。

    【讨论】:

      【解决方案2】:

      通过更多研究,我能够弄清楚如何解决我的问题。原来我需要的只是一些 AJAX。我使用 Ajax.Actionlink 而不是 HTML 操作链接,并且能够在页面上的 div 中加载我的部分视图。这是我的新视图和控制器。部分观点保持不变。

      查看

      @model  MiniWeb.Models.Tool
      
      <!DOCTYPE html>
      <html>
      <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
      
         <link href="~/Content/Site.css" rel="stylesheet" />
         <script src="~/Scripts/jquery-3.1.1.min.js"></script>
         <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
      </head>
      <body>
      <h2>Tool List</h2>
      <div class="table-responsive">
         <table class="table table-hover">
            <thead>
            <tr>
               <th>Id</th>
               <th>Description</th>
            </tr>
            </thead>
            @foreach (var item in Model.ToolIdDescription)
            {
      
               <tbody>
               <tr>
                  <td>@Ajax.ActionLink(item.Key, "_Partially", new { id = item.Key },new AjaxOptions()
                      {
                         HttpMethod = "GET",
                         UpdateTargetId = "ToolInfo",
                         InsertionMode = InsertionMode.Replace,
      
      
                      })
      
                  </td>
      
      
                  <td>@Html.DisplayFor(modelItem => item.Value)</td>
               </tr>
               </tbody>
            }
         </table>
      </div>
      </body>
      </html>
      <div id="ToolInfo">
      
      
      </div>
      

      我的返回 PartialView 的新控制器看起来像这样

      部分视图控制器

      public PartialViewResult _Partially(string id)
            {
               Tool selectedTool = new Tool();
               if (id != null)
               {
                  var request = (HttpWebRequest)WebRequest.Create("http://localhost/DbService/Tool/" + id);
      
                  XmlDocument xml = new XmlDocument();
                  Stream aResponsestream;
                  string aResult = "";
                  using (aResponsestream = request.GetResponse().GetResponseStream())
                  using (StreamReader aReader = new StreamReader(aResponsestream, Encoding.UTF8))
      
      
                  {
                     aResult = aReader.ReadToEnd();
                     aResponsestream.Close();
                  }
                  xml.LoadXml(aResult);
                  var Description = xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/Description");
                  if (Description != null) selectedTool.Description = Description.InnerText;
                  var Adapter = xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/Adapter/Name");
                  if (Adapter != null) selectedTool.Adapter = Adapter.InnerText;
                  var TNumber = xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/TNo");
                  if (TNumber != null) selectedTool.TNumber = TNumber.InnerText;
                  var ToolId = xml.SelectSingleNode("RetrieveResponse/RetrieveResult/Tool/ToolId");
                  if (ToolId != null) selectedTool.ToolId = ToolId.InnerText;
      
                  return PartialView("_Partially", selectedTool);
               }
               return PartialView();
      
      
            }
      

      希望这个答案将来能帮助像我这样的人。谢谢阅读。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2012-08-05
        • 2016-10-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-11-14
        相关资源
        最近更新 更多