如何post返回表格？

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();

我预计当我的视图被呈现时它会调用 http get 方法，但事实并非如此，它总是调用 post 方法（如果有 get post 和同名）用这个定义：

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

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

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

以下是我的操作方法：

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

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

如何post 支持我的模型？最好的方法是什么？显然它不能以正常方式使用这些 Devexpress 控件。我能以某种方式 post 用 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()

接下来我创建控制器动作：

    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 });
    }

接下来我创建视图（名称：“_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

如何post返回表格？

How to post back form?

asp.net-mvc

jquery

razor

devexpress-mvc