如何發佈表單？

我需要使用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後用相同的名稱）：

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？什麼是最好的方法？請指教。

來源

2015-08-16 bambi

我總是使用下面的解決方案，當我想顯示驗證彈出窗體。首先我創建一般只與回調路線值彈出控制（任選地使用開始和結束回調和其它性質）：

@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驗證（例如myLogic.js 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

來源

2015-08-18 13:09:00

如何發佈表單？

回答

相關問題