如何将值从表单发送到服务器（Sitefinity MVC 小部件）

Question

我想将值从表单发送到服务器。

表单由只有输入的部分视图组成。这样做的目的是实现更多的代码可重用性。目前部分视图不是强类型的，但它们会是。

提交 BeginFormSitefinity

我尝试提交 beginFormSitefinity，但该小部件从屏幕上消失并且发生了回发。但是，我只想保存更改并留在同一页面中。所以提交 Html.BeginFormSitefinity 不是一个选项。

使用JQuery

序列化目标表单

然后我尝试使用 Jquery 发送表单值。我通过 id 序列化了表单，但我总是得到一个空结果。

var frm = $('#AccountForm');
var jsonFrm = JSON.stringify(frm.serializeArray()); // result = []

使用 JQuery

序列化页面中的表单元素

因此我尝试在我的页面中查询 "form" 元素，因为 Sitefinity 将您的 beginformSitefinity 转换为 DIV 并将其动态添加到表单中 Read more....

var frm = $('form');
var jsonFrm = JSON.stringify(frm.serializeArray());

令我惊讶的是，我能够获得表单的所有值以及更多。我也得到了

"ScriptManager1_TSM"
"ctl11_TSSM"
"__EVENTTARGET"
"__EVENTARGUMENT"
"__VIEWSTATE"
"__VIEWSTATE发电机"
"ctl00$ScriptManager1"

换句话说这是aspnetForm，页面中唯一的窗体（刚刚发现）。这不是我想要的，因为它会检索其他字段。如果我在屏幕上有更多表格，它们也会被检索到。我宁愿只获得我的表单输入，因为它可以让我免于过滤 aspnetForm。

问题

你们知道只发送我的表单值而不是将整个 aspnetForm 中的所有值发送到服务器吗？

将由部分视图组成的处方集的值发送到服务器的最佳方式是什么？

Jquery

 $('#btnsubmit').on('click', function () {
        var url = '@Url.RouteUrl("ControllersRoute", new { controller = "Controller", action = "Action" })';
        var frm = $("form").serializeArray();
        alert(frm)
        $.ajax({
            url:  url,
            type: "Post",
            data: { model: JSON.stringify(frm) },
            dataType: "json",
            success: function (response) {
                alert('success');
            },
            error: function (response) {
                alert('error');
            }

        })

    });

查看

   @using (Html.BeginFormSitefinity("Action", "AccountForm"))
    {


        Html.RenderPartial("_CustomerInfo");
        Html.RenderPartial("_DeliveryDetail");
        Html.RenderPartial("_OrderDetail");
        <input id="btnsubmit" type="button" value="Save changes">
    }

部分浏览量

_OrderDetail

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <div>
        <input id="OrderDetail" name="OrderDetail" type="text" value="Order" /> 
    </div>
</body>
</html>

_DeliveryDetail

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <div>
        <input id="deliveryDetail" name="deliveryDetail" type="text" value="Delivery" /> 
    </div>
</body>
</html>

_CustomerInfo

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <div>
        <input id="CustomerDetail" name="CustomerDetail" type="text" value="Customer" /> 
    </div>
</body>
</html>

Answer 1

处理此问题的最佳方法（也是对 MVC 最友好的方法）是使用模型。（您也可以简单地添加一个隐藏字段并在表单发布后访问它）。

这将允许您在表单中为模型的每个属性显示和存储一个项目，然后在将模型发布到服务器（提交表单时）时轻松检索它们。查看以下示例以了解简要演练：

您的模特

出于示例目的，我创建了一个包含两个属性的非常基本的模型。这些属性将出现在您的表单中，以便它们的值可以被序列化并映射到您的模型，以便在您的控制器中访问。

public class ExampleModel
{
    //Your Properties Here
    public string PropertyOne { get; set; }
    public string PropertyTwo { get; set; }
}

你的控制器

目前有两个操作，第一个只是实例化一个新的 ExampleModel 来填充您的视图。第二个（装饰有 [HttpPost] 属性）将处理访问从您的 POST 事件返回的属性。

//This initially renders your View
public ActionResult CreateExample()
{
     ExampleModel model = new ExampleModel();
     return View(model);
}

[HttpPost]
//This is for your POST event to submit your Form data to the server
public ActionResult CreateExample(ExampleModel model)
{
          //Access Properties Here using model.PropertyName
          return View(model);
}

您的观点

以下视图是通过 Visual Studio 友好的脚手架自动创建的，因此这里有很多您可能并不真正需要的“绒毛”。但这将为您的每个属性创建适当的字段，以便它们可以轻松映射到您的模型。

@model YourProject.Models.ExampleModel

<!-- This is going to POST the Model to your CreateExample Action (Default FormMethod is a POST) -->
@using (Html.BeginForm("CreateExample","Default")) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>ExampleModel</legend>
        <div class="editor-label">
        @Html.LabelFor(model => model.PropertyOne)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PropertyOne)
        @Html.ValidationMessageFor(model => model.PropertyOne)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PropertyTwo)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PropertyTwo)
        @Html.ValidationMessageFor(model => model.PropertyTwo)
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
<!-- enter code here -->
</fieldset>

}

Answer 2

您应该使用 Html.BeginFormSitefinity() 而不是默认的 MVC

Answer 3

我很确定您想要的是序列化表单并对服务器执行异步 POST。

我不熟悉你是如何序列化你的表单的，但我在我的 Sitefinity 项目中是这样做的 jquery:

var $form = $('#idOfMyDivContainingMyInputs');
var serializedData = $form.find('input, select, textarea').serialize();

然后我使用 $.post.

发送此数据

请注意，您不能这样做：

$form.serialize()

因为 jquery 的序列化仅适用于表单元素，而您的 "form" 是 div。

如何将值从表单发送到服务器（Sitefinity MVC 小部件）

How to send values from Form to Server (Sitefinity MVC Widgets)

forms

asp.net-mvc

jquery

sitefinity

您的模特

你的控制器

您的观点