MVC-intro

Trekke ut skjemaet

Vi trekker ut bare skjema-delen i et eget form.
_PersonForm.cshtml:

@model MVCintro.Models.PersonModel


    @using (Html.BeginForm("Create", "Person"))
    {

        @Html.ValidationSummary()
        @Html.ValidationMessageFor(m => m.FirstName)
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
        <br />
        @Html.ValidationMessageFor(m => m.LastName)
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)<br />
        @Html.LabelFor(m => m.PhoneNumber)
        @Html.TextBoxFor(m => m.PhoneNumber)<br />

        @Html.LabelFor(m => m.EmailAddress)
        @Html.TextBoxFor(m => m.EmailAddress)<br />

        @Html.LabelFor(m => m.DateOfBirth)
        @Html.EditorFor(m => m.DateOfBirth)<br />

        @Html.LabelFor(m => m.IdentityNumber)
        @Html.EditorFor(m => m.IdentityNumber)<br />

        <input type="submit" value="Send inn" />

    }



    <script>
       
            var form = $("form");

            form.submit(function (e) {
                // Hindre skjemaet i å sendes inn på vanlig måte
                e.preventDefault();

                // Samle input-dataen i en string
                var input = form.serialize();

                // Hent url fra action-attributten til skjemaet
                var url = form.attr('action');

                // Post skjemaet med ajax
                $.post(url, input, function (data) {
                    // Sett inn resultatet i div'en med id 'person-info'
                    $('#person-info').html(data);
                });

            });
        
    </script>

Endre index

Vi bruker Html.Action og Html.Partial til å teste ut bruk av Child Action og Partial
Index.cshtml:

@using MVCintro.Models
@model MVCintro.Models.PersonModel

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@Html.ActionLink("Link 1", "Show", new { @id = 13 }, new { @class = "pull-right", id = "iden-til-linken" })

<a href="@Url.Action("Show", new {@id = 13})">Link 2</a>

<hr/>
<h3>Person1 1:</h3>
@Html.Partial("_Show", new PersonModel(1337, "Frank", "Hansen", "13371337"))

<hr />
<h3>Person 2:</h3>
@Html.Action("Show")

<hr/>

<div id="person-info">
    @Html.Partial("_PersonForm", Model)
</div>

Tilpasse Controlleren

I tillegg til å sjekke om det er et ajax-kall må vi nå sjekke om det er en Child Action ofr å ta hensyn til Html.Action.
Vi gjør også noen forenklinger og lager en hjelpemetode for å gjøre koden vår penere. PersonController:

public class PersonController : Controller
{
	// GET: Person
	public ActionResult Index()
	{
		return View();
	}

	public ActionResult Show(int id = 1)
	{
		var model = new PersonModel(id, "Nils", "Jensen", "9161166")
		{
			DateOfBirth = new DateTime(1987,06,06),
			IdentityNumber = "12345678910"
		};

		if (RequestIsAjaxOrChild())
			return PartialView(model);

		return View(model);
	}


	[HttpPost]
	public ActionResult Create(PersonModel model)
	{

		if (RequestIsAjaxOrChild())
			return ModelState.IsValid ? PartialView("Show", model) : PartialView("Index", model);
		
		return ModelState.IsValid ? View("Show", model) : View("Index", model);

	}

	private bool RequestIsAjaxOrChild()
	{
		return Request.IsAjaxRequest() || ControllerContext.IsChildAction;
	}
}