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

时间:2013-07-23 06:42:28

标签: jquery ajax json asp.net-mvc-4 model

当用户从智能向导中的第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);}            

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

1 个答案:

答案 0 :(得分:0)

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或从JSON转换。 MVC和jQuery将为您处理这个问题,因此在您的控制器端可以执行以下操作:

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