更新部分视图时，将清理表单内容

Question

我正在制作一个表格，用于记录用户的个人数据和工作经历。 MVC5。

我有一个包含Clients和JobExperiences实体的模型，首先使用EF代码创建

在这个模型上，我像这样创建了视图模型。

工作经验的视图模型

public class JobExperienceViewModel
{
    [Required]
    [Display(Name = "Nombre Compañia")]
    public string CompanyName { get; set; }

    [Required]
    [Display(Name = "Fecha de Ingreso")]
    [DataType(DataType.Date)]
    public DateTime EntryDate { get; set; }

    [Required]
    [Display(Name = "Fecha de Retiro")]
    [DataType(DataType.Date)]
    public DateTime RetirementDate { get; set; }


    [Required]
    [Display(Name = "Cargo")]
    public string Role { get; set; }

    [Required]
    [Display(Name = "Funciones")]
    public string Functions { get; set; }

    [Required]
    [Display(Name = "Motivo de Retiro")]
    public string RetirementCause { get; set; }
}

用于保存个人数据和工作经历的Resume视图模型，例如公共类ResumeViewModel {

    public ResumeViewModel(Client client, ApplicationUser user)
    {
        ...
    }


    public List<JobExperienceViewModel> JobExperienceViewModels { get; set; }

    [Display(Name = "Primer nombre")]
    public string FirstName { get; set; }

    [Display(Name = "Segundo nombre")]
    public string MiddleName { get; set; }

    [Display(Name = "Primer apellido")]
    public string LastName { get; set; }
}

我创建了一个Resume Controller来处理所有这些数据

public class ResumeController : Controller
{
    #region Global Actions

    //
    // GET: /Resume/
    //This method loads the information for a given userName and loads the viewmodel and pass it to the view
    [Authorize(Roles = "Admin, Recepcionista, Orientador")]
    public ActionResult Index(string userName)
    {
        var context = new ApplicationDbContext();
        var user = (from _user in context.Users
                    where _user.UserName == userName
                    select _user).FirstOrDefault();

        Client client = new Client();
        try
        {
            client = (from _client in context.Client
                      where _client.ApplicationUserId == user.Id
                      select _client).FirstOrDefault();

        }
        catch (System.Reflection.TargetException)
        {
            client = new Client();
        }

        ResumeViewModel model;

        model = new ResumeViewModel(client, user);

        TempData["ResumeViewModel"] = model;
        return View(model);
    }

    //This method is inttended to save all resume data to persistence
    [HttpPost]
    public ActionResult Index(ResumeViewModel model)
    {
        ApplicationDbContext context = new ApplicationDbContext();
        bool exists = false;

        var client = (from _client in context.Client
                      where _client.ApplicationUserId == model.ApplicationUserId
                      select _client).FirstOrDefault();

        if (!String.IsNullOrEmpty(client.ApplicationUserId))
        {
            exists = true;
        }

        client.Address = model.Address;
        client.ArmyCard = model.ArmyCard;
        client.ArmyCardClass = model.ArmyCardClass;
        client.BasicKnowledgeCoreId = model.SelectedBasicKnowledgeCoreId;
        client.BirthCityId = model.SelectedBirthCityId;
        client.BirthCountryId = model.SelectedBirthCountryId;
        client.BirthDate = model.BirthDate;
        client.BirthDepartmentId = model.SelectedBirthDepartmentId;
        client.CellPhoneNumber = model.CellPhoneNumber;
        client.Comments = model.Comments;
        client.DataVisibilityLevelId = model.SelectedDataVisibilityLevelId;
        client.DocumentNumber = model.DocumentNumber;
        client.DocumentTypeId = model.SelectedDocumentTypeId;
        client.DrivingLicenceExpirationDate = model.DrivingLicenceExpirationDate;
        client.DrivingLicenseCategoryId = model.SelectedDrivingLicenseCategoryId;
        client.EducationCountryId = model.SelectedEducationCountryId;
        client.FirstNationalityId = model.SelectedFirstNationalityId;
        client.GenreID = model.SelectedGenreId;
        client.GraduationYear = model.GraduationYear;
        client.HandicapTypeID = model.SelectedHandicapTypeID;
        client.HasWorkExperience = model.HasWorkExperience;
        client.HireTypeId = model.SelectedHireTypeId;
        client.HomeCityId = model.SelectedHomeCityId;
        client.HomeCountryId = model.SelectedHomeCountryId;
        client.HomeDepartmentId = model.SelectedHomeDepartmentId;
        client.Institution = model.Institution;
        client.IsGraduated = model.IsGraduated;
        client.IsHomeOfficeInterested = model.IsHomeOfficeInterested;
        client.IsHouseHoldHead = model.IsHouseHoldHead;
        client.LanguageId = model.SelectedLanguageId;
        client.LanguageSkillLevelID = model.SelectedLanguageSkillLevelID;
        client.MarriageStatusId = model.SelectedMarriageStatusId;
        client.Neighborhood = model.Neighborhood;
        client.PhoneNumber = model.PhoneNumber;
        client.ProCardExpeditionDate = model.ProCardExpeditionDate;
        client.ProCardNumber = model.ProCardNumber;
        client.ProfessionalCardCareer = model.ProfessionalCardCareer;
        client.ProfessionalProfile = model.ProfessionalProfile;
        client.SalaryRangeId = model.SelectedSalaryRangeId;
        //Este campo está comentadoporque el proceso de registro debe hacerse por detalles del nivel, donde esta elid y sus detalles.
        //client.ScholarLevelId = model.SelectedScholarLevelId;
        client.SecondNationalityId = model.SelectedSecondNationalityId;
        client.Title = model.Title;
        client.WorkStatusID = model.SelectedWorkStatusID;



        if (!exists)
        { context.Client.Add(client); }

        try
        {
            if (context.SaveChanges() > 0)
                RedirectToAction("Index", "SearchClient");
            else { return View(model); }
        }
        catch (Exception)
        {
            return View(model);
            throw;
        }

        return View(model);
    }

    #endregion

    #region JobExperience


    public ActionResult ShowJobExperience(ICollection<Models.JobExperienceViewModel> JobExperienceViewModels)
    {   
        return View(JobExperienceViewModels);
    }

    public ActionResult CreateJobExperience(ICollection<Models.JobExperienceViewModel> JobExperienceViewModels)
    {
        return View(JobExperienceViewModels);
    }

    [HttpGet]
    public ActionResult CreateJobExperience(Models.JobExperienceViewModel JobExperienceViewModel)
    {
        #region Using TempData

        ResumeViewModel model = (ResumeViewModel)TempData["ResumeViewModel"];

        model.JobExperienceViewModels.Add(JobExperienceViewModel);

        TempData["ResumeViewModel"] = model;

        #endregion

        return View("Index", model);
    }

    #endregion
}

最后，意见以这种方式组织。 父视图包含所有个人数据，并且jobExperiences列出并创建视图作为大表单内的部分视图。

该观点的相关部分是

@model CAEWebSite.Models.ResumeViewModel

@{
    ViewBag.Title = "Hoja de Vida";
}

@using (Ajax.BeginForm(null))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>
        @{var fullName = Model.FirstName +
                  (!String.IsNullOrWhiteSpace(Model.MiddleName) ? " " + Model.MiddleName : String.Empty) +
                  (!String.IsNullOrWhiteSpace(Model.LastName) ? " " + Model.LastName : String.Empty) +
                  (!String.IsNullOrWhiteSpace(Model.SecondLastName) ? " " + Model.SecondLastName : String.Empty);
        }
        @fullName
    </h4>
    <hr />
    @Html.ValidationSummary(true)

    <div class="form-group">
        <div class="col-md-12">
            @Model.Email
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-12">
            @Model.UserName
        </div>
    </div>
    <hr />
    <h3>Datos personales</h3>
    <div class="form-group">
        @Html.LabelFor(model => model.BirthDate, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @type = "date" })

            @Html.ValidationMessageFor(model => model.BirthDate)
        </div>
    </div>

    <h3>Experiencia laboral</h3>
    <div class="form-group">
        @Html.LabelFor(model => model.HasWorkExperience, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.HasWorkExperience)
            @Html.ValidationMessageFor(model => model.HasWorkExperience)
        </div>
    </div>
    <h3>Trabajos anteriores</h3>
    <div class="col-md-12">
        <div id="divListJobExperience">
            @Html.Partial("_ListJobExperience", Model.JobExperienceViewModels)
        </div>
        <p>
            @*@Html.Action("ShowJobExperience", Model.JobExperienceViewModels)*@
            <a href="#" onclick="$('#newJobExperience').bPopup({}); return false;">Nueva experiencia</a>
        </p>
    </div>

<div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

}

<div id="newJobExperience" style="background-color:#fff; border-radius:5px;">
<div class="col-md-12">
    @Html.Partial("_CreateJobExperience", new CAEWebSite.Models.JobExperienceViewModel())
</div>
</div>

</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script>
    $("#newJobExperience").hide();
    $("#newRelative").hide();
    $("#newCapacitationCourse").hide();
    $("#newScholarLevelDetail").hide();
</script>

}

@ Html.Partial（“ _ CreateJobExperience”，新的CAEWebSite.Models.JobExperienceViewModel（））

部分视图以bpopup插件作为模式加载。 部分视图是这样的

_ListJobExperience视图

@model IEnumerable<CAEWebSite.Models.JobExperienceViewModel>


<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.CompanyName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.EntryDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.RetirementDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Role)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Functions)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.RetirementCause)
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CompanyName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EntryDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.RetirementDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Role)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Functions)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.RetirementCause)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

_CreateJobExperience视图

public class ResumeController : Controller
{
    #region Global Actions

    //
    // GET: /Resume/
    [Authorize(Roles = "Admin, Recepcionista, Orientador")]
    public ActionResult Index(string userName)
    {
        var context = new ApplicationDbContext();
        var user = (from _user in context.Users
                    where _user.UserName == userName
                    select _user).FirstOrDefault();

        Client client = new Client();
        try
        {
            client = (from _client in context.Client
                      where _client.ApplicationUserId == user.Id
                      select _client).FirstOrDefault();

        }
        catch (System.Reflection.TargetException)
        {
            client = new Client();
        }

        ResumeViewModel model;

        model = new ResumeViewModel(client, user);

        TempData["ResumeViewModel"] = model;
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(ResumeViewModel model)
    {
        ApplicationDbContext context = new ApplicationDbContext();
        bool exists = false;

        var client = (from _client in context.Client
                      where _client.ApplicationUserId == model.ApplicationUserId
                      select _client).FirstOrDefault();

        if (!String.IsNullOrEmpty(client.ApplicationUserId))
        {
            exists = true;
        }

        client.Address = model.Address;
        client.ArmyCard = model.ArmyCard;
        client.ArmyCardClass = model.ArmyCardClass;
        client.BasicKnowledgeCoreId = model.SelectedBasicKnowledgeCoreId;
        client.BirthCityId = model.SelectedBirthCityId;
        client.BirthCountryId = model.SelectedBirthCountryId;
        client.BirthDate = model.BirthDate;
        client.BirthDepartmentId = model.SelectedBirthDepartmentId;
        client.CellPhoneNumber = model.CellPhoneNumber;
        client.Comments = model.Comments;
        client.DataVisibilityLevelId = model.SelectedDataVisibilityLevelId;
        client.DocumentNumber = model.DocumentNumber;
        client.DocumentTypeId = model.SelectedDocumentTypeId;
        client.DrivingLicenceExpirationDate = model.DrivingLicenceExpirationDate;
        client.DrivingLicenseCategoryId = model.SelectedDrivingLicenseCategoryId;
        client.EducationCountryId = model.SelectedEducationCountryId;
        client.FirstNationalityId = model.SelectedFirstNationalityId;
        client.GenreID = model.SelectedGenreId;
        client.GraduationYear = model.GraduationYear;
        client.HandicapTypeID = model.SelectedHandicapTypeID;
        client.HasWorkExperience = model.HasWorkExperience;
        client.HireTypeId = model.SelectedHireTypeId;
        client.HomeCityId = model.SelectedHomeCityId;
        client.HomeCountryId = model.SelectedHomeCountryId;
        client.HomeDepartmentId = model.SelectedHomeDepartmentId;
        client.Institution = model.Institution;
        client.IsGraduated = model.IsGraduated;
        client.IsHomeOfficeInterested = model.IsHomeOfficeInterested;
        client.IsHouseHoldHead = model.IsHouseHoldHead;
        client.LanguageId = model.SelectedLanguageId;
        client.LanguageSkillLevelID = model.SelectedLanguageSkillLevelID;
        client.MarriageStatusId = model.SelectedMarriageStatusId;
        client.Neighborhood = model.Neighborhood;
        client.PhoneNumber = model.PhoneNumber;
        client.ProCardExpeditionDate = model.ProCardExpeditionDate;
        client.ProCardNumber = model.ProCardNumber;
        client.ProfessionalCardCareer = model.ProfessionalCardCareer;
        client.ProfessionalProfile = model.ProfessionalProfile;
        client.SalaryRangeId = model.SelectedSalaryRangeId;
        //Este campo está comentadoporque el proceso de registro debe hacerse por detalles del nivel, donde esta elid y sus detalles.
        //client.ScholarLevelId = model.SelectedScholarLevelId;
        client.SecondNationalityId = model.SelectedSecondNationalityId;
        client.Title = model.Title;
        client.WorkStatusID = model.SelectedWorkStatusID;



        if (!exists)
        { context.Client.Add(client); }

        try
        {
            if (context.SaveChanges() > 0)
                RedirectToAction("Index", "SearchClient");
            else { return View(model); }
        }
        catch (Exception)
        {
            return View(model);
            throw;
        }

        return View(model);
    }

    #endregion

    #region JobExperience


    public ActionResult ShowJobExperience(ICollection<Models.JobExperienceViewModel> JobExperienceViewModels)
    {   
        return View(JobExperienceViewModels);
    }

    public ActionResult CreateJobExperience(ICollection<Models.JobExperienceViewModel> JobExperienceViewModels)
    {
        return View(JobExperienceViewModels);
    }

    [HttpPost]
    public ActionResult CreateJobExperience(Models.JobExperienceViewModel JobExperienceViewModel)
    {
        #region Using TempData

        ResumeViewModel model = (ResumeViewModel)TempData["ResumeViewModel"];

        model.JobExperienceViewModels.Add(JobExperienceViewModel);

        TempData["ResumeViewModel"] = model;

        #endregion

        return View("Index", model);
    }

    #endregion
}
}

问题

每当我创建新的工作经验时，我都会更新viemodel，将jobExperienceViewModel添加到经验列表中，然后将其发送回视图以返回。

它的工作原理是，经验列表似乎已满。 但是，表格中的所有数据都丢失，清除了。

我正在使用在所有用户交互过程中保持viewmodel状态的方法，直到当我将所有模型发送给持久性时他或她单击提交的表单。

我认为我需要的是一种更新体验列表的方式，就像在老式的Updatepanel中一样。

或使我无法使用该功能的解决方法。

Answer 1

在这里，您将使用Ajax表单提交劳动经验，而不用“主要形式”清除数据：

模型：

    public class HojaDeVida
{
    public HojaDeVida()
    {
        ExperienciasLaborales = new List<ExperienciaLaboral>();
    }

    public string Nombre { get; set; }
    public string Apellido { get; set; }
    public IList<ExperienciaLaboral> ExperienciasLaborales { get; set; }
}

public class ExperienciaLaboral
{
    public string Empresa { get; set; }
    public int Anios { get; set; }
}

控制器：

    public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        TempData["hojavida"] = new HojaDeVida();
        return View();
    }

    [HttpPost]
    public ActionResult Index(HojaDeVida hojaDeVida)
    {
         //Submit the info in "hojaDeVida" and TempData["HojaVida"]
        return new EmptyResult();
    }

    [HttpPost]
    public PartialViewResult AddExperienciaLaboral(ExperienciaLaboral experiencia)
    {
        var hojadevida = (HojaDeVida)TempData["hojavida"];
        hojadevida.ExperienciasLaborales.Add(experiencia);
        TempData["hojavida"] = hojadevida;
        return PartialView("_ListExperiencias", hojadevida.ExperienciasLaborales);
    }
}

“主要视图”（Hoja de Vida）：

@using WebApplication1.Controllers
@model HojaDeVida
@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("Index", "Home"))
    {
        <div>
            @Html.LabelFor(x => x.Nombre)
            @Html.EditorFor(x => x.Nombre)
        </div>
        <div>
            @Html.LabelFor(x => x.Apellido)
            @Html.EditorFor(x => x.Apellido)
        </div>
        <input type="submit" value="Guardar Hoja de Vida" />
    }

@Html.Partial("_AddExperiencia", new ExperienciaLaboral())

@section scripts
{
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
}

然后使用Ajax形式的“ _AddExperience” PartialView：

@using WebApplication1.Controllers
@model ExperienciaLaboral
@using (Ajax.BeginForm("AddExperienciaLaboral", "Home", new AjaxOptions { UpdateTargetId = "data", HttpMethod = "POST" }))
    {
        <div>
            @Html.LabelFor(x => Model.Empresa)
            @Html.EditorFor(x => Model.Empresa)
        </div>
        <div>
            @Html.LabelFor(x => Model.Anios)
            @Html.EditorFor(x => Model.Anios)
        </div>
        <input type="submit" value="Agregar Experiencia" />
    }
<div id="data">
    @Html.Partial("_ListExperiencias", new List<ExperienciaLaboral>())
</div>

最后是“ _ListExperiencias” PartialView：

@model IList<WebApplication1.Controllers.ExperienciaLaboral>
@foreach (var item in Model)
    {
        <div>
            @string.Format("Empresa : {0} | Años: {1}", item.Empresa, item.Anios)
    </div>
    }

如您所见，Ajax表单位于HTML表单之外， 您不能嵌套两个表单 （此处为Ajax表单和HTML表单），而是需要使用某些JavaScript或jQuery.Ajax来嵌套漂亮的可视表单

Answer 2

您可以使用Ajax + Web API或控制器中的任何操作来保存体验。