MVC4使用一个模型创建注册页面

时间:2013-05-06 11:44:45

标签: ajax database asp.net-mvc-4 model

我真的没有一个很好的例子,主要是因为我只是扯着它,到目前为止,我的代码只是一个乱糟糟的混蛋 - dee哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇。我很茫然,需要一些帮助或建议。这就是我需要的:

我正在创建一个仅用于学习目的的模拟注册表单。我使用工作申请表作为我的例子。一页包含申请人的个人信息,如姓名,年龄,性别和教育程度。第二页允许他们选择他们希望申请的职位,并允许他们提供技能列表。我设置了一个model来将datasave设置为database。第一页将有一个ajax 下一个按钮,它将第一页表单替换为第二页表单。第二页有两个按钮,返回提交(足够简单),也是ajax-y。我现在的问题是从两个表单中将data保存到entry中的单个model。有没有人有一个简单的例子或链接我可以考虑这种情况?或者甚至是另一种方式来解决这个问题?这将不胜感激!! :)

模型

public int Id { get; set; }

    [Required(ErrorMessage = "First name Req")]
    [Display(Name = "First name")]
    public string First { get; set; }

    [Required(ErrorMessage = "Last name Req")]
    [Display(Name = "Last name")]
    public string Last { get; set; }

    [Required(ErrorMessage = "Age Req")]
    [Range(18, 75, ErrorMessage = "Age Range of {1}-{2}")]
    public int Age { get; set; }

    [Required(ErrorMessage = "Please Select Gender")]
    public string Gender { get; set; }

    [Required(ErrorMessage = "Education Level Req")]
    public string Education { get; set; }

    public string Position { get; set; }

    public string Skills { get; set; }

控制器

[HttpGet]
    public PartialViewResult Apply1()
    {
        var model = db.Applications.Find(id);
        if (model != null)
        {
            return PartialView("_Apply1", model);
        }
        return PartialView("_Apply1");
    }

    [HttpPost]
    public PartialViewResult Apply1(Application app)
    {
        if (Request.IsAjaxRequest())
        {
            if (db.Applications.Where(a => a.First.ToLower() == app.First.ToLower() && a.Last.ToLower() == app.Last.ToLower() && a.Age == app.Age && a.Gender == app.Gender && a.Education == app.Education).Count() == 0)
            {
                app.Position = "x";
                db.Applications.Add(app);
                db.SaveChanges();
            }
            else
            {
                app = db.Applications.Single(a => a.First.ToLower() == app.First.ToLower() && a.Last.ToLower() == app.Last.ToLower() && a.Age == app.Age && a.Gender == app.Gender && a.Education == app.Education);
            }

            PosList(); //This is a helper Method, get's values for a dropdown list
            id = app.Id;
            var model = db.Applications.Find(id);
            return PartialView("_Apply2", model);
        }

        return PartialView("_Apply1", app);
    }

    [HttpGet]
    public PartialViewResult Apply2()
    {
        var model = db.Applications.Find(id);
        if (model != null)
        {
            return PartialView("_Apply2", model);
        }
        return PartialView("_Apply2");
    }

    [HttpPost]
    public PartialViewResult Apply2(Application app)
    {


        if (ModelState.IsValid)
        {
            db.Entry(app).State = EntityState.Modified;
            db.SaveChanges();
            ModelState.Clear();
            return PartialView("_Success");
        }

        PosList();
        return PartialView("_Apply2", app);
    }

第一次观看

@model SiPrac.Models.Application

@using (Ajax.BeginForm("Apply1", new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "appForm"
}))
{
@Html.AntiForgeryToken()

<div class="editor-label">
    @Html.LabelFor(model => model.First)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.First)
    @Html.ValidationMessageFor(model => model.First)
</div>
<div class="clear"></div>

<div class="editor-label">
    @Html.LabelFor(model => model.Last)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Last)
    @Html.ValidationMessageFor(model => model.Last)
</div>
<div class="clear">

<input class="btn" type="submit" value="Next" />
}

第二次观看

@using (Ajax.BeginForm("Apply2", new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "appForm"
}))
{
@Html.AntiForgeryToken()

<div class="editor-label">
    @Html.LabelFor(model => model.Position)
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.Position, (IEnumerable<SelectListItem>)ViewData["selectPos"])
</div>
<div class="clear"></div>

<input class="btn" type="submit" value="Submit" />
}

1 个答案:

答案 0 :(得分:1)

好的,我会尝试让它尽可能短。因此,假设您已经知道如何在表单之间切换,我知道您根据您的问题进行切换,并且您有以下表单:

<form id="form1">
    @Html.EditorFor(model => model.First)
    // rest of the fields goes here
</form>
<form id="form2">
    @Html.EditorFor(model => model.Position)
    // rest of the fields goes here
    <button id="submitAll">Submit</button>
</form>

假设您有按钮来回切换视图。 submitAll按钮触发对控制器方法的回发操作,并传递如下值:

function submitAllFields() {
    var o = {
        // list properties here similar to your model property name
        // and assign values to them
        First: $("#First").val(),
        Position: $("#Position").val()
    };
    $.post('@Url.Action("apply2")', { app: o }, function(result) {
        // do something here
    });
}

然后,您需要一种方法来接受所有输入:

[HttpPost]
public PartialViewResult Apply2(Application app)
{
    if (ModelState.IsValid)
    {
        db.Entry(app).State = EntityState.Modified;
        db.SaveChanges();
        ModelState.Clear();
        return PartialView("_Success");
    }
    // do something here
}