Databases
StackOverflow2013
Postsdbo
POMVC 4 Edit modal form using Bootstrap
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC 4 Edit modal form using Bootstrap
    primarykey
    data
    text
    <p>I'm using MVC 4 and Entity Framework to develop an intranet web application. I have a list of persons which can be modify by an edit action. I wanted to make my app more dynamic by using modal forms. So I tried to put my edit view into my Bootstrap modal and I have 2 questions about it :</p> <ul> <li>Should I use a simple or a partial view?</li> <li>How can I perform the validation (actually it work but it redirects me to my original view so not in the modal form)</li> </ul> <p>I think I have to use AJAX and/or jQuery but I'm new to these technologies. Any help would be appreciated.</p> <p>EDIT : My Index View : </p> <pre><code>@model IEnumerable&lt;BuSIMaterial.Models.Person&gt; @{ ViewBag.Title = "Index"; } &lt;h2&gt;Index&lt;/h2&gt; &lt;br /&gt; &lt;div class="group"&gt; &lt;input type="button" value="New person" class="btn" onclick="location.href='@Url.Action("Create")';return false;"/&gt; &lt;input type="button" value="Download report" class="btn" onclick="location.href='@Url.Action("PersonReport")';return false;"/&gt; &lt;/div&gt; @using (Html.BeginForm("SelectedPersonDetails", "Person")) { &lt;form class="form-search"&gt; &lt;input type="text" id="tbPerson" name="tbPerson" placeholder="Find an employee..." class="input-medium search-query"&gt; &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt; &lt;/form&gt; } &lt;table class="table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Firstname&lt;/th&gt; &lt;th&gt;Lastname&lt;/th&gt; &lt;th&gt;Start Date&lt;/th&gt; &lt;th&gt;End Date&lt;/th&gt; &lt;th&gt;Details&lt;/th&gt; &lt;th&gt;Actions&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; @foreach (BuSIMaterial.Models.Person item in ViewBag.PageOfPersons) { &lt;tr&gt; &lt;td&gt;@item.FirstName&lt;/td&gt; &lt;td&gt;@item.LastName&lt;/td&gt; &lt;td&gt;@item.StartDate.ToShortDateString()&lt;/td&gt; &lt;td&gt; @if (item.EndDate.HasValue) { @item.EndDate.Value.ToShortDateString() } &lt;/td&gt; &lt;td&gt; &lt;a class="details_link" data-target-id="@item.Id_Person"&gt;Details&lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;div&gt; &lt;button class="btn btn-primary edit-person" data-id="@item.Id_Person"&gt;Edit&lt;/button&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="6"&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;National Number&lt;/th&gt; &lt;td&gt;@item.NumNat&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Vehicle Category&lt;/th&gt; &lt;td&gt;@item.ProductPackageCategory.Name&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Upgrade&lt;/th&gt;&lt;td&gt;@item.Upgrade&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;House to work&lt;/th&gt; &lt;td&gt;@item.HouseToWorkKilometers.ToString("G29")&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div id="details_@item.Id_Person"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; } &lt;/tbody&gt; &lt;/table&gt; &lt;div class="modal hide fade in" id="edit-member"&gt; &lt;div id="edit-person-container"&gt;&lt;/div&gt; &lt;/div&gt; @section Scripts { @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") &lt;script type="text/javascript" language="javascript"&gt; $(document).ready(function () { $('#tbPerson').autocomplete({ source: '@Url.Action("AutoComplete")' }); $(".details_link").click(function () { var id = $(this).data("target-id"); var url = '/ProductAllocation/ListByOwner/' + id; $("#details_"+ id).load(url); }); $('.edit-person').click(function () { var url = "/Person/EditPerson"; var id = $(this).attr('data-id'); $.get(url + '/' + id, function (data) { $('#edit-person-container').html(data); $('.edit-person').modal('show'); }); }); }); &lt;/script&gt; } </code></pre> <p>My Partial View : </p> <pre><code>@model BuSIMaterial.Models.Person &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Edit&lt;/h3&gt; &lt;/div&gt; &lt;div&gt; @using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "list-of-people" })) { @Html.ValidationSummary() @Html.AntiForgeryToken() &lt;div class="modal-body"&gt; &lt;div class="editor-field"&gt; @Html.TextBoxFor(model =&gt; model.FirstName, new { maxlength = 50 }) @Html.ValidationMessageFor(model =&gt; model.FirstName) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextBoxFor(model =&gt; model.LastName, new { maxlength = 50 }) @Html.ValidationMessageFor(model =&gt; model.LastName) &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn btn-inverse" type="submit"&gt;Save&lt;/button&gt; &lt;/div&gt; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTraffy
    1. USTraffy
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMVC 4 Edit modal form using Bootstrap
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMVC 4 Edit modal form using Bootstrap
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMVC 4 Edit modal form using Bootstrap
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload