MVC 4 Edit Modal Form Using Bootstrap

MVC 4 Edit modal form using Bootstrap

You should use partial views. I use the following approach:

Use a view model so you're not passing your domain models to your views:

public class EditPersonViewModel
{
    public int Id { get; set; }   // this is only used to retrieve record from Db
    public string Name { get; set; }
    public string Age { get; set; }
}

In your PersonController:

[HttpGet] // this action result returns the partial containing the modal
public ActionResult EditPerson(int id)
{  
    var viewModel = new EditPersonViewModel();
    viewModel.Id = id;
    return PartialView("_EditPersonPartial", viewModel);
}

[HttpPost] // this action takes the viewModel from the modal
public ActionResult EditPerson(EditPersonViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        var toUpdate = personRepo.Find(viewModel.Id);
        toUpdate.Name = viewModel.Name;
        toUpdate.Age = viewModel.Age;
        personRepo.InsertOrUpdate(toUpdate);
        personRepo.Save();
        return View("Index");
    }
}

Next create a partial view called _EditPersonPartial. This contains the modal header, body and footer. It also contains the Ajax form. It's strongly typed and takes in our view model.

@model Namespace.ViewModels.EditPersonViewModel
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Edit group member</h3>
</div>
<div>
@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
                    new AjaxOptions
                    {
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "POST",
                        UpdateTargetId = "list-of-people"
                    }))
{
    @Html.ValidationSummary()
    @Html.AntiForgeryToken()
    <div class="modal-body">
        @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Name)
        @Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Age)
    </div>
    <div class="modal-footer">
        <button class="btn btn-inverse" type="submit">Save</button>
    </div>
}

Now somewhere in your application, say another partial _peoplePartial.cshtml etc:

<div>
   @foreach(var person in Model.People)
    {
        <button class="btn btn-primary edit-person" data-id="@person.PersonId">Edit</button>
    }
</div>
// this is the modal definition
<div class="modal hide fade in" id="edit-person">
    <div id="edit-person-container"></div>
</div>

    <script type="text/javascript">
    $(document).ready(function () {
        $('.edit-person').click(function () {
            var url = "/Person/EditPerson"; // the url to the controller
            var id = $(this).attr('data-id'); // the id that's given to each button in the list
            $.get(url + '/' + id, function (data) {
                $('#edit-person-container').html(data);
                $('#edit-person').modal('show');
            });
        });
     });
   </script>

How to use Edit in bootsrap Modal asp.net mvc

As I have said in my comment the code works perfectly now.

In my Index view I have replaced this:

<a data-modal='' href='"/Tache/edit/"+@item.TacheId' data-id="@item.TacheId" id="@item.TacheId " title=" edit">Edit </a> 

To this:

<a data-modal='' href="@Url.Action("Edit", "Tache", new { id = item.TacheId })" data-id="@item.TacheId" id="@item.TacheId " title=" edit">Modifier </a>

Submit form within Bootstrap modal within Form...?

I actually solved the issue by putting the second form (for the modal) outside the main form and created a partial view to create the modal div (and drop down list to be updated by the modal) back inside the main form. That way, when the code renders in html for there are two distinctly separate forms. When the second form (which is inside the modal) submits it's data I get it to redirect to the main view. That way, the information that the modal adds to the main view is then submitted and available for use.

I hope this makes sense to people. I'm pretty new to MVC so am hacking away blindly!

using bootstrap Modal in ASP.net MVC 4

Try giving your Ajouter demander button a unique ID

<button id="btnCreateDM" class="btn btn-primary CreateDM" data-id="@Model.CIT_CIN">Ajouter demander</button>

And then add your click event using the new ID. Also, just use a Url.Content for the path to the controller, sometimes a hard coded path causes problems.

    $('#btnCreateDM').click(function () {
        var url = '@Url.Content("CreateDM")'; // the url to the controller

Change modal form depending on the button clicked

I've created a testing sample which will help you understand how can you achieve this.
Index.cshtml which will show a list of employees

@model IEnumerable<MvcApplication1.Models.Employee>
@using MvcApplication1.Models;
<h2>Index</h2>
<table>
@foreach (Employee item in Model)
{
    <tr>
        <td>@Html.ActionLink(@item.EmployeeName, "Name", new { id = item.ID })</td>
        <td>
            <button type="button" data-id='@item.ID' class="anchorDetail btn btn-info btn-sm" data-toggle="modal" 
         data-target="#myModal">
                Open Large Modal</button></td>
    </tr>
 }
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Details</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
   </div>
  </div>

At the same page, reference the following scripts

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

JQuery AJAX call for getting/setting the data of individual employee from ActionMethod at the same page

<script>
$(document).ready(function () {
    var TeamDetailPostBackURL = '/Employee/Details';
    $(document).on('click', '.anchorDetail', function () {
        var $buttonClicked = $(this);
        var id = $buttonClicked.attr('data-id');
        var options = { "backdrop": "static", keyboard: true };
        $.ajax({
            type: "GET",
            url: TeamDetailPostBackURL,
            contentType: "application/json; charset=utf-8",
            data: { "Id": id },
            datatype: "json",
            success: function (data) {
                debugger;
                $('.modal-body').html(data);
                $('#myModal').modal(options);
                $('#myModal').modal('show');

            },
            error: function () {
                alert("Dynamic content load failed.");
            }
        });
    });
    $("#closbtn").click(function () {
        $('#myModal').modal('hide');
    });
});

Now Create a class of Employee(because i'm not using EF)

public class Employee
{
    public int ID { get; set; }
    public string EmployeeName { get; set; }
}

Create controller named Employee and 2 ActionMethods like these:

public ActionResult Index()
{
  return View(emp);//sends a List of employees to Index View
}
public ActionResult Details(int Id)
{
  return PartialView("Details", 
  emp.Where(x=>x.ID==Convert.ToInt32(Id)).FirstOrDefault());
}

I'm returning PartialView because I need to load a page within a page.
Details.cshtml

@model MvcApplication1.Models.Employee
<fieldset>
<legend>Employee</legend>
<div class="display-label">
     @Html.DisplayNameFor(model => model.ID)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.ID)
</div>
<div class="display-label">
     @Html.DisplayNameFor(model => model.EmployeeName)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.EmployeeName)
</div>
</fieldset>
<p>@Html.ActionLink("Back to List", "Index")</p>

When you execute and visit the Index page of Employee, you'll see screen like this:

And the Modal Dialog with results will be shown like this:

Note: You need to add reference of jquery and Bootstrap and you can further design/customize it according to your needs

Hope it helps!

MVC 5 Edit Bootstrap Modal Popup

I would recommend using AJAX and a single 'Edit' modal which would be cleared and repopulated when the user clicks 'edit' for each row.

Essentially, you will have a partial view which will be called via AJAX and injected onto the page, the method will have a parameter of productId.

Template

Please note the important part here is the onclick attribute of the edit button.

@model QuotationManagement.Bussiness_Logic_Layer.Product
<tr>
    <td>
        @Html.HiddenFor(model => model.Id)
        @Html.DisplayFor(model => model.Name)
    </td>
    <td>
        @Html.DisplayFor(model => model.Price)
    </td>
    <td>
        @Html.DisplayFor(model => model.Gender)
    </td>
    <td>
        <a href="#" onclick="editProduct(productId)" class="btn btn-primary">Edit</a>            
    </td>
</tr>

Javascript

$(function() {
    $('.editModal').modal();
});

function editProduct(productId) {
    $.ajax({
        url: '/Product/GetProductDetailsModal/' + productId, // The method name + paramater
        success: function(data) {
            $('#modalWrapper').html(data); // This should be an empty div where you can inject your new html (the partial view)
        }
    });
}

Add the following to your top-level view

<div id="modalWrapper">
    @* Inject form here *@
</div>

Partial View

Your partial view will look something like this

@model ProductModel
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Edit</h4>
            </div>
             <div class="modal-body">
                <form>
                    <input type="text" id="ProductName" value="@Model.Name"/>
                    <input type="submit" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

---

Related Topics