mvc4 paging on partial view

Question

I have created a person register form. In this form I have added one partial view which shows list of persons. I have added a paging on this form. Now I want to implement search functionality.

My form looks like following

Here I want to implement search functionality. but the issue is I have two buttons on a form ie Create and search . when I click on search button it gives me required field validation of form register.cshtml .

Here is my code for register.cshtml

@model WebLess.Models.PersonModel

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

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.firstName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.firstName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.firstName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.lastName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.lastName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.lastName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
        </div>
    </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 class="form-group">
        @if (ViewBag.Message != null)
        {
            <span class="text-success">@ViewBag.Message</span>
        }
    </div>
    <div class="form-group">
        @Html.Partial("list", Model.listOfPerson)
    </div>
</div>
}

Here is my list.cshtml .

@model PagedList.IPagedList<WebLess.Models.PersonModel>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />


@using (Html.BeginForm("Register", "Person", FormMethod.Get))
{
<p>
    Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
    <input type="submit" value="Search" />
</p>
}
<table class="table">
<tr>
    <th>
        First name
    </th>
    <th>
        Last name
    </th>
    <th>
        E-mail Address
    </th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.firstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.lastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.email)
    </td>
</tr>
}
</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Register",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

How can I implement search functionality?

Answer 1

You can move the list partial view outside of the creation form, then put the search functionality into its own form inside the list partial view (they're completely separate anyway, so should be separate). This should then achieve what you're looking for.

Answer 2

Nesting of forms is not allowed and may result in an undefined behavior between browsers.

Use two seperate form instead of nested form

like steve says "move the list partial view outside of the creation form" would result into two separate form instead of one form inside another form

like

@using (Html.BeginForm())
{
}

@using (Html.BeginForm("Register", "Person", FormMethod.Get))
{
}

instead of ( a form in a form is not allowed )

 @using (Html.BeginForm())
    {

       @using (Html.BeginForm("Register", "Person", FormMethod.Get))
       {
       }
    }