更新部分視圖時，將清理表單內容

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或控制器中的任何操作來保存體驗。