javascript 使用ASP.NET MVC形式的数据生成xml文件

Generate xml file using data in ASP.NET MVC form

提问by AloofC

I had a form earlier which took input about the Relation title and FirstName, LastName of 2 persons. Once entered the info and clicks Submit, an xml got generated which looked like:

我之前有一个表格，它输入了关于 2 个人的关系标题和名字、姓氏的信息。输入信息并单击提交后，将生成一个 xml，如下所示：

<?xml version="1.0" encoding="utf-16"?>
<Data>
  <RelationData>
    <Relation Title="Friends">
      <Persons>
        <Person FirstName="Tom" LastName="B" />
        <Person FirstName="Jerry" LastName="C" />
      </Persons>
    </Relation>
  </RelationData>
</Data>

Models - FormModel.cs

模型 - FormModel.cs

public class Relation
{
    public string Title { get; set; }
    public string Person1FirstName { get; set; }
    public string Person1LastName { get; set; }
    public string Person2FirstName { get; set; }
    public string Person2LastName { get; set; }
}

XmlModel.cs

模型模型文件

public class XmlModel
{
    [XmlRoot("Data")]
    public class Data
    {
        [XmlElement("RelationData")]
        public RelationData RelationData { get; set; }
    }

    [SerializableAttribute()]
    public class RelationData
    {
        [XmlElement("Relation")]
        public Relation Relation { get; set; }
    }

[SerializableAttribute()]
    public class Relation
    {
        [XmlElementAttribute()]
        public Persons Persons { get; set; }

        [XmlAttributeAttribute()]
        public string Title { get; set; }
    }

[SerializableAttribute()]
    public class Persons
    {
        [XmlElementAttribute("Person")]
        public Person[] Person { get; set; }
    }

[SerializableAttribute()]
    public class Person
    {
        [XmlAttributeAttribute()]
        public string FirstName { get; set; }

        [XmlAttributeAttribute()]
        public string LastName { get; set; }
    }
}

The View.cshtml is strongly typed to the Relation class in FormModel. It contains the text boxes and a submit button which calls the CreateData action in the controller.

View.cshtml 被强类型化为 FormModel 中的 Relation 类。它包含文本框和一个提交按钮，该按钮调用控制器中的 CreateData 操作。

<div class="form-horizontal">
    @Html.ValidationSummary(true)
    <div class="form-group">
        <input id="CreateData" type="submit" class="btn btn-primary" value="Create Data File" />
    </div>
</div>

Controller.cs - Reads the data passed in and creates the XmlModel object that is serialized using helper class XmlResult.

Controller.cs - 读取传入的数据并创建使用帮助程序类 XmlResult 序列化的 XmlModel 对象。

[HttpPost]
public ActionResult CreateData(Relation rData)
{

    var xmlModelData = new XmlModel();

    // Create elements in XmlModel object using values in rData
    ...

    return new XmlResult<XmlModel>()
    {
        Data = xmlModelData
    };
}

Helper class

帮手类

public class XmlResult<T> : ActionResult
{
    public T Data { private get; set; }

    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.Clear();
        context.HttpContext.Response.ContentType = "text/xml";
        context.HttpContext.Response.ContentEncoding = Encoding.UTF8;

        var filename = DateTime.Now.ToString("mmddyyyyhhss") + ".xml";
        context.HttpContext.Response.AddHeader("content-disposition", "attachment; filename=" + filename);

        using(var writer = new StringWriter())
        {
            XmlSerializer xs = new XmlSerializer(typeof(T));
            xs.Serialize(writer, Data);
            context.HttpContext.Response.Write(writer);
        }
    }
}

So this gives a dialog on the browser giving an option to save the xml or open it.

所以这会在浏览器上提供一个对话框，提供保存 xml 或打开它的选项。

Now we want some more inputs on the form and based on these inputs some more complex xml data needs to be generated in the same xml file.

现在我们希望在表单上有更多的输入，并且基于这些输入，需要在同一个 xml 文件中生成一些更复杂的 xml 数据。

The xml format is complex but it will be new data in the previous xml like:

xml 格式很复杂，但它将是以前的 xml 中的新数据，例如：

<?xml version="1.0" encoding="utf-16"?>
<Data>
  <RelationData>
    <Relation Title="Friends">
      <Persons>
        <Person FirstName="Tom" LastName="B" />
        <Person FirstName="Jerry" LastName="C" />
      </Persons>
    </Relation>
    <Relation Title="Friends">
      <Persons>
        <Person FirstName="Hello" LastName="AD" />
        <Person FirstName="World" LastName="BC" />
      </Persons>
    </Relation>
    ...
  </RelationData>
  <ComplexData>
   ...
  </ComplexData>
</Data>

As you can see, the form can supply multiple Relation items as well as some ComplexData. I don't want to create classes for this ComplexData structure, so I probably want some way to directly write the xml instead of serializing the objects. Also tying the view to Relation model doesn't make sense now.

如您所见，表单可以提供多个 Relation 项以及一些 ComplexData。我不想为这个 ComplexData 结构创建类，所以我可能想要某种方式直接编写 xml 而不是序列化对象。现在将视图绑定到 Relation 模型也没有意义。

So how can I go about this, so that I am still able to generate the xml file in the browser? In the current solution, it is doing a server post but I am willing to change that to entirely work on the client side. Not sure if this can be done using jquery/javascript?

那么我该如何解决这个问题，以便我仍然能够在浏览器中生成 xml 文件呢？在当前的解决方案中，它正在执行服务器发布，但我愿意将其更改为完全在客户端工作。不确定这是否可以使用 jquery/javascript 来完成？

采纳答案by 0gyob0

You ask if you can create the XML 100% on the client side? Yes. You cannot download it as a file (due to security) but you could put it in a text area.

您问是否可以在客户端创建 100% 的 XML？是的。您不能将其作为文件下载（出于安全考虑），但您可以将其放在文本区域中。

You can make xml just by concatenating a string on the client side.

您可以通过在客户端连接一个字符串来制作 xml。

Here is a post that shows how to work with XML with different javascript techniques on the client side only: Generate XML document in-memory with JavaScript

这是一篇文章，展示了如何仅在客户端使用不同的 javascript 技术处理XML： 使用 JavaScript 在内存中生成 XML 文档

Jquery: How to parse XML using jQuery?

Jquery： 如何使用 jQuery 解析 XML？

aaaand here are some tricks for allowing downloads on the client side, some of which require no server side code: Using HTML5/Javascript to generate and save a file

aaa 和这里有一些允许在客户端下载的技巧，其中一些不需要服务器端代码： 使用 HTML5/Javascript 生成和保存文件