如何在智能向导中将模型发布到控制器？

Question

当用户在智能向导中从第 2 步转到第 3 步时，我想做的只是返回一个 $.ajax()。所以我制定了以下代码。我使用 var model = JSON.stringify(@Model); 将我的模型转换为字符串并使用 ajax 请求传递它

Ajax 代码

 var model = JSON.stringify(@Model);
                var s = 10;
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetSampleFeed")',
                    data: "inStringModel=" + model
                });

但以上内容不会触发对控制器的回调。我已通过删除 JSON.stringify(@Model) 进行检查，并将其替换为“Just text”。现在 ajax 请求到达控制器没有任何问题

下面是我的代码

模型文件

public class OndemandFeedModel
{
    /// <summary>
    /// Collection of countrt that the application supports
    /// </summary>
    public CountryModel Country { get; set; }

    /// <summary>
    /// Model used to display fields and retrive the selected fields from user
    /// </summary>
    public FieldSelectModel Fields { get; set; }

    /// <summary>
    /// Model used to display filters and retrive the selected fields from user
    /// </summary>
    public FilterSelectModel Filters { get; set; }
}

public class FieldSelectModel
{


    /// <summary>
    /// Collection of Fields
    /// </summary>
    public List<FieldGroup> FieldGroup { get; set; }
}

public class FilterSelectModel
{
    [Required]
    [Display(Name="From")]
    public DateTime StartTime { get; set; }

    [Required]
    [Display(Name="To")]
    public DateTime EndTime { get; set; }

    public FilterSelectModel()
    {
        StartTime = DateTime.Now;
    }
}

public class FieldGroup
{
    /// <summary>
    /// group of the field
    /// </summary>
    public string GroupName { get; set; }

    /// <summary>
    /// group of the field
    /// </summary>
    public List<FieldModel> Fields { get; set; }
}

public class FieldModel
{
    /// <summary>
    /// Unique Id referred to each field
    /// </summary>
    public int FieldId { get; set; }

    /// <summary>
    /// name of the field
    /// </summary>
    public string FieldName { get; set; }

    /// <summary>
    /// user defined name for the field
    /// </summary>
    public string UserDefinedFieldName { get; set; }

    /// <summary>
    /// bool value indicating whether the field has been selected by the user
    /// </summary>
    public bool IsEdited { get; set; }

    /// <summary>
    /// type of the field coded / raw
    /// </summary>
    public string FieldType { get; set; }

    /// <summary>
    /// category of the field in which it has been clasified
    /// </summary>
    public string FieldGroup { get; set; }

    /// <summary>
    /// status of the field if status is 1 display field to user other wise dont display
    /// </summary>
    public int Status { get; set; }

    /// <summary>
    /// country of field
    /// </summary>
    public string Country { get; set; }

    /// <summary>
    /// Title attribute for the element will be poped up in tool tip
    /// </summary>
    public string Title { get; set; }

    public FieldModel()
    {
        IsEdited = false;
        UserDefinedFieldName = string.Empty;
        Title = "Double click each fields to edit.";
    }
}

我的观点

我的 Javascript 代码

<script type="text/javascript">

    $(document).ready(function () {
        $('#wizard').smartWizard({
            onShowStep: showAStepCallback,
            onFinish: onFinishCallback
        });

        function showAStepCallback(obj, context) {

            if (context.fromStep == 2 && context.toStep == 3) {
                var model = JSON.stringify(@Model);
                var s = 10;
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetSampleFeed")',
                    data: "inStringModel=" + model
                });

            }

            // return false to stay on step and true to continue navigation 
        }
        // setting the active tab
        $('#wizard').smartWizard();
        $('.date').datepicker({ dateFormat: "dd/mm/yy" });
        function onFinishCallback() {
            $('#wizard').smartWizard('showMessage', 'Finish Clicked');
            //alert('Finish Clicked');
        }
            .....
    });
</script>

控制器代码

[HttpPost]
public ActionResult GetSampleFeed(string inStringModel)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    var inObjectModel = serializer.Deserialize(inStringModel, typeof(OndemandFeedModel));
    return Content("<row></row>");
}

任何帮助将不胜感激！

谢谢

更新 1

我改了

var model = JSON.stringify(@Model);

到

var model = @{new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model);}            

现在请求到达控制器，但我收到的模型是空的。

Answer 1

JSON.stringify(@Model); 不会做你认为它会做的事情。 JSON.stringify 需要一个 Javascript 对象。 @Model 将使 Razor 输出 Model.ToString(); 的内容，这将不是 Javascript 对象。

您需要将模型序列化为 Javascript，您可以使用 JavaScriptSerializer：

var model = @{new JavaScriptSerializer().Serialize(Model)};
                var s = 10;
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetSampleFeed")',
                    data: model
                });

您可以在 System.Web.Extensions DLL 中找到 JavaScriptSerializer。

此外，由于您正在反序列化模型，因此无需将其转换为 JSON。 MVC 和 jQuery 会为你处理这个，所以在你的控制器端你可以这样做：

[HttpPost]
public ActionResult GetSampleFeed(OndemandFeedModel model)
{
    return Content(string.Format("<row>{0}</row>", model.RowName));
}