jquery - 如何回传表格？

Question

我需要使用 Razor 和 Devexpress 控件制作一些表单。当用户打开 Devexpress 弹出控件时，会出现一个表单，其中包含他需要输入的字段。这是我的观点:

@model Models.Request
@Html.DevExpress().PopupControl(
settings =>
{
    settings.Name = "newRequest";
    settings.CallbackRouteValues = new { Controller = "Request", Action = "RequestForm" };
    settings.EnableClientSideAPI = true;
    settings.Width = 450;
    settings.ShowHeader = true;
    settings.ShowShadow = true;
    settings.PopupAnimationType = AnimationType.Fade;
    settings.AllowDragging = true;
    settings.Modal = true;
    settings.SetContent( () =>
    {
        using ( Html.BeginForm( ))
        {
            ViewContext.Writer.Write( "<div id = 'products'>" );
            foreach(var product in Model.Products)
            {
                Html.RenderPartial( "ProductPartial", product );
            }
            ViewContext.Writer.Write( "</div>" );

            //Total days field
            @Html.DevExpress().SpinEdit(
                            cSettings =>
                            {
                                cSettings.Name = "numberOfProducts";
                                cSettings.Properties.EnableClientSideAPI = true;
                                cSettings.Width = 125;
                                cSettings.Properties.MinValue = 0;
                                cSettings.Properties.MaxValue = 100;
                                cSettings.ControlStyle.BackColor = System.Drawing.Color.FromArgb( 82, 82, 82 );
                                cSettings.ControlStyle.ForeColor = System.Drawing.Color.White;
                            } ).Bind( Model.NumberOfProducts ).GetHtml();

            //POST BACK
            @Html.DevExpress().Button( saveSett =>
            {
                saveSett.Name = "Save";
                saveSett.Text = "Save";
                saveSett.Width = 40;
                saveSett.Height = 25;
                saveSett.ControlStyle.CssClass = "button";
                saveSett.Styles.EnableDefaultAppearance = false;
                saveSett.EnableClientSideAPI = true;
                saveSett.UseSubmitBehavior = true;
                //saveSett.ClientSideEvents.Click = "function(s, e) { if(CheckValidation(s, e)) {} }";
            } ).GetHtml();
        }
    } );    
} ).GetHtml();

我期望当我的 View 被渲染时，它会调用http get方法，但事实并非如此，它总是调用用以下定义的post方法(如果有同名的get post):

settings.CallbackRouteValues = new { Controller = "Request", Action = "RequestForm" };

为什么会这样呢？如果我更改 post 方法名称(将在提交时调用)，它会给我一个错误，说没有可以调用的方法。

此外，我有一个想要用于提交表单的按钮: settings.CallbackRouteValues = new { Controller = "Request", Action = "RequestForm"};但它甚至没有进入 Controller 中的任何操作方法。为什么会这样？

以下是我的操作方法:

public ActionResult RequestForm()
{
    //...
}

[HttpPost]
public ActionResult RequestForm([ModelBinder(typeof(DevExpressEditorsBinder))] Request request)
{
    //...
}

如何发回我的模型？最好的方法是什么？显然，它不能以正常方式使用这些 Devexpress 控件。我可以用 jquery 发回这个模型吗？什么是最好的方法？请指教。

Answer 1

当我想显示带有验证的弹出表单时，我总是使用下面的解决方案。首先，我通常仅使用回调路由值创建弹出控件(可以选择使用 Begin 和 End 回调以及其他属性):

@Html.DevExpress().PopupControl(settings =>
{
settings.Name = "newRequest";
settings.CallbackRouteValues = new { Controller = "Request", Action = "GetRequestForm" };
//[Optionally]: If you want pass data to action controller or set popup properties
settings.ClientSideEvents.BeginCallback = "myLogic.onBeginActionCallback";     
settings.ClientSideEvents.EndCallback = "myLogic.onEndActionCallback";
}).GetHtml()

接下来我创建 Controller 操作:

    public ActionResult GetRequestForm()        {
        // … some logic here ...
        return PartialView("_PartialView", viewModel);
    }

    [HttpPost]
    public ActionResult RequestForm([ModelBinder(typeof(MyBinder))] Request request)
    {
        // … some logic here ...
        return Json(new { success = true });
    }

接下来我创建 View (名称:“_PartialView”):

@using (Ajax.BeginForm("RequestForm", "Request",
new AjaxOptions
{  HttpMethod = "POST"  }, new { id = "saveForm" }))
{
    @Html.DevExpress().TextBox(settings =>
    {
        settings.Name = "someProperty";
    }).GetHtml()

// … other properties…

@Html.DevExpress().Button(settings =>
{
   settings.Name = "SaveButton";
   settings.Text = "Save"; 
   settings.ClientSideEvents.Click = "function(s,e) { myLogic.saveForm(); }";
   settings.UseSubmitBehavior = false;
 }).GetHtml()
}

最后我创建了使用 JQuery 验证的 JS 脚本(例如 myLogic.js):

var myLogic = function () {

function saveForm(){
var saveForm = $("#saveForm");
    saveForm.removeData('validator');
    saveForm.validate(validationSettings);

// jQuery validation
$("#someProperty_I").rules("add", {
    required: true,
    // Connect with server example
    remote: {
        url: '/Request/CheckValue',
        data: {
            //.. some logic here ..
        }
    },
    messages: {
        required: "Required!",
        remote: "Validation message"
    }
});

// and add other jQuery validation

if (saveForm.valid()) {
        saveForm.submit();
    }
}

var validationSettings = {
    errorPlacement: function (error, element) {
        error.appendTo(element.parent("td").parent("tr").parent("tbody").parent("table").parent("td"));
    }
}

return {
    saveForm: saveForm
}}();

当然你应该包含 jQuery 脚本:

1. jquery.validate.min.js
2. jquery.validate.unobtrusive.min.js