C# MVC Bootstrap Add Record Popup Form

Question

I have an existing form which relies on a category being selected, if a category does not exist for the user the company belongs too, the user must be able to create one.

I believe jQuery and JSON is the route forward, but I cannot generate a true popup above the current Bootstrap form, nor can I get the popup form to post without posting the main form.

If possible I'd like the jQuery function getCategories to open a popup form only if no data is returned, then the popup form using validation, once a record has been successfully added to the database, the popup form close and then recall the jQuery function getCategories and select the newly added record.

HomeController.cs

public JsonResult GetCategories(int companyId)
{
    var categories = _repository.GetCategories(companyId);

    return Json(categories, JsonRequestBehavior.AllowGet);
}

_Layout.cshtml

@using Documents



    
    
    
    
    
    @ViewBag.Title - @ViewBag.LenderName
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/dataTablesCss")
    @Styles.Render("~/Content/blue")
    


    @Scripts.Render("~/bundles/jquery")
    
    @RenderSection("featusearch", required: false)
    @RenderBody()
    
        
            
                
                     
                    
                        Copyright © 2015 - @ViewBag.CompanyName
                    
                
            
        
    
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/dataTables")
    @Scripts.Render("~/bundles/money")
    @Scripts.Render("~/bundles/tooltip")
    @Scripts.Render("~/bundles/jquery-ui")
    
    
    
    @RenderSection("scripts", false)



$(document).ready(function () {
    var companyId = parseInt($('#CompanyId').val(), 0);

    function getCategories() {
        $.getJSON('/Home/GetCategories', { companyId: companyId }, function (data) {
            $('#Categories option').remove();
            $('#Categories').append('');

            for (var i = 0; i < data.length; i++) {
                if (data[i].Id != categoryId) {
                    $('#Categories').append('');
                } else {
                    $('#Categories').append('');
                }
            }

            if (data.length > 0) {
                // We Have Date
            } else {
                // No Data
                // Create Dialog Popup
                alert('Error getting Categories, please add a Category');
            }
        }).fail(function () {
            debugger;
            alert('Error getting Categories, please add a Category');
        });
    }

    $('#Categories').change(function () {
        var selected = $(this).find('option:selected');

        categoryId = selected.val();

        $('#CategoryId').val(categoryId);
    });
});

Index.cshtml

@using WebApplication1
@using WebApplication1.Helpers
@model WebApplication1.Models.Order
@{
    ViewBag.Title = "Test";
}

    
        
            
                
                    
                        
                        Test
@ViewBag.CompanyName
                    
                    
                        
                            @Html.MenuLink("Logout", "Login", "Logout", "", "Logout")
                        
                    
                
            
        
    


    
        
            
                Test This is a test page.
            
            
        
    


    
        
            
                @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", @Id = "Form" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(m => m.CategoryId, new { @Value = @ViewBag.CategoryId, @Id = "CategoryId" })
                                                
                        
                            
                                
                                    
                                        Title
                                        @Html.DropDownListExt("SalutationId", ViewBag.SalutationList as SelectList, "Title")
                                    
                                    @Html.ValidationMessageFor(m => m.SalutationId)
                                

                                
                                    
                                        Forename
                                        @Html.TextBoxForExt(m => m.Forename, new Dictionary { { "Value", @ViewBag.Forename } })
                                    
                                    @Html.ValidationMessageFor(m => m.Forename)
                                
                            
                        
                        
                            
                                
                                    
                                        Middle Name
                                        @Html.TextBoxForExt(m => m.MiddleName, new Dictionary { { "Value", @ViewBag.MiddleName } })
                                    
                                    @Html.ValidationMessageFor(m => m.MiddleName)
                                

                                
                                    
                                        Surname
                                        @Html.TextBoxForExt(m => m.Surname, new Dictionary { { "Value", @ViewBag.Surname } })
                                    
                                    @Html.ValidationMessageFor(m => m.Surname)
                                
                            
                                                  
                        
                            
                                
                                    
                                        Categories
                                        
                                    
                                    @Html.ValidationMessageFor(m => m.CategoryId)
                                                                  
                                
                                    
                                
                            
                        
                    
                }

form.js

$(document).ready(function () {
    var companyId = parseInt($('#CompanyId').val(), 0);
    var categoryId = parseInt($('#CategoryId').val(), 0);

    getCategories();

    function getCategories() {
        $.getJSON('/Home/GetCategories', { companyId: companyId }, function (data) {
            $('#Categories option').remove();
            $('#Categories').append('');

            for (var i = 0; i < data.length; i++) {
                if (data[i].Id != categoryId) {
                    $('#Categories').append('');
                } else {
                    $('#Categories').append('');
                }
            }

            if (data.length > 0) {
                // We Have Data
            } else {
                // No Data
                // Create Dialog Popup
                alert('Error getting Categories, please add a Category');
            }
        }).fail(function () {
            debugger;
            alert('Error getting Categories, please add a Category');
        });
    }

    $('#Categories').change(function () {
        var selected = $(this).find('option:selected');

        categoryId = selected.val();

        $('#CategoryId').val(categoryId);
    });
});

Add.cshtml

@using WebApplication1.Helpers
@model WebApplication1.Models.Category

    
        
            
                @using (Html.BeginForm("Add", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", @Id = "AddForm" }))
                {
                    @Html.HiddenFor(m => m.CompanyId, new { @Value = @ViewBag.CompanyId, @Id = "CompanyId" })
                    
                        
                            
                                
                                    
                                        Category Name
                                        @Html.TextBoxForExt(m => m.CategoryName)
                                    
                                    @Html.ValidationMessageFor(m => m.CategoryName)
                                

                            
                        
                        
                            
                                
                            
                        
                    
                }

BundleConfig.cs

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();

        bundles.UseCdn = true;
        BundleTable.EnableOptimizations = false;

        bundles.Add(new ScriptBundle("~/bundles/ie8").Include(
            "~/Scripts/html5shiv.js",
            "~/Scripts/respond.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js"));

        var jquery = new ScriptBundle("~/bundles/jquery", "~/Scripts/jquery-2.1.4.js").Include(
        "~/Scripts/Compatibility/jquery-1.11.3.js");

        jquery.CdnFallbackExpression = "window.jQuery";

        bundles.Add(jquery);

        bundles.Add(new ScriptBundle("~/bundles/jqueryvalidate").Include(
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/_extensions.js"));

        bundles.Add(new ScriptBundle("~/bundles/money").Include(
            "~/Scripts/jquery.price_format.2.0.js"));

        bundles.Add(new ScriptBundle("~/bundles/tooltip").Include(
            "~/Scripts/tooltip.js"));

        bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
            "~/Scripts/DataTables-1.10.9/jquery.dataTables.js",
            "~/Scripts/DataTables-1.10.9/dataTables.bootstrap.js",
            "~/Scripts/DataTables-1.10.9/date-euro.js"));

        bundles.Add(new ScriptBundle("~/bundles/awesomeMvc").Include(
            "~/Scripts/AwesomeMvc.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include(
            "~/Scripts/jquery-ui.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/Site.css"));

        bundles.Add(new StyleBundle("~/Content/blue").Include(
            "~/Content/colour-blue.css"));

        bundles.Add(new StyleBundle("~/Content/red").Include(
            "~/Content/colour-red.css"));

        bundles.Add(new StyleBundle("~/Content/dataTablesCss").Include(
            "~/Content/DataTables-1.10.9/dataTables.bootstrap.css",
            "~/Content/DataTables-1.10.9/Buttons-1.0.3/buttons.bootstrap.css"));
    }
}

Any help would be much appreciated :-)

Drew Rochon · Accepted Answer

It sounds like you might be looking for a Modal popup. Bootstrap already has this built in. You can learn about it here: http://www.w3schools.com/bootstrap/bootstrap_modal.asp

You can also pull what to show in the modal from another view using the Html.RenderPartial(view)

C# MVC Bootstrap Add Record Popup Form

Answers (2)

Related Questions