将部分视图中的数据导入主视图

时间：2017-06-05 17:35:13

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

我是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的新手，想要开发最佳实践而不是做一个黑客工作。谢谢您的帮助。

2 个答案:

答案 0 :(得分：1)

通过更多的研究，我能够弄清楚如何解决我的问题。原来我需要的是一些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();


      }

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

答案 1 :(得分：0)

您希望在局部视图上创建一个表单，将表格提交给主页面控制器。

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

相关问题
最新问题