如何发回表格？

Posted 2023-04-12

【中文标题】如何发回表格？

【英文标题】：How to post back form?

【发布时间】：2015-11-09 07:14:57

【问题描述】：

我需要使用 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)

    //...

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

【参考方案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