Pass (Send) data from Bootstrap Modal Popup to Controller in ASP.Net MVC

TayDanz

SOLVED CLOSED ACTIVE ANSWERED
User: TayDanz
Posted: on Apr 08, 2020 08:23 AM
Forum: ASP.Net MVC
Answer: 1
Views: 15174

I have a modal popup in my view that asks for information, I would like the info obtained from that view to be sent to the controller. From the controller it should be sent to a .txt file and then also displayed on a page.

If I use the method below with a button and textbox it works fine, but the minute I try to use a modal instead it wont pass through the info in the textbox modal popup. Please help. Also is there a way to di it without using ajax as I have never used it before.

Thanks!

        [HttpPost]
        public ActionResult Index(string addCategory)
        {
            string path = Server.MapPath("~/App_Data/Categories.txt");
            using (StreamWriter sw = System.IO.File.CreateText(path))
            {
                sw.WriteLine(addCategory);
            }
            ViewBag.Fullname = addCategory;
            return View();
        }

@using (Html.BeginForm("Index", "List", FormMethod.Post))
{    <!-- Add Modal -->
<form>
    <div class="modal fade" id="mdl-add" tabindex="-1" role="dialog" aria-labelledby="mdl-add-lbl" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="mdl-add-lbl">Add Category</h5>
                    <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <!-- Category Input Container -->
                        <label for="name-input">Description</label>
                        <input type="text" class="form-control" id="addCategory" name="addCategory">
                    </div>

                </div>
                <div class="modal-footer bg-dark">

                    <button type="button" id="btnSubmit" class="btn btn-primary" data-dismiss="modal">Submit</button>
                    <button type="button" id="btnDismiss" class="btn btn-primary" data-dismiss="modal">Back</button>
                </div>

            </div>
        </div>
    </div>
</form>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 7

Reply
ANSWER
User: dharmendr
Replied: on Apr 10, 2020 08:51 AM
Report

TayDanz says:

<button type="button" id="btnSubmit" class="btn btn-primary" data-dismiss="modal">Submit</button>

To submit the form you need to use button type submit and remove the data-dismiss attribute.

Check the below sample code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(string addCategory)
    {
        string path = Server.MapPath("~/App_Data/Categories.txt");
        using (System.IO.StreamWriter sw = System.IO.File.CreateText(path))
        {
            sw.WriteLine(addCategory);
        }
        ViewBag.Fullname = addCategory;
        return View();
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <input type="button" name="name" value="Open Modal" class="btn btn-primary" data-target="#mdl-add" data-toggle="modal" />
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
    <!-- Add Modal -->
        <div class="modal fade" id="mdl-add" tabindex="-1" role="dialog" aria-labelledby="mdl-add-lbl" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header bg-dark text-white">
                        <h5 class="modal-title" id="mdl-add-lbl">Add Category</h5>
                        <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <!-- Category Input Container -->
                            <label for="name-input">Description</label>
                            <input type="text" class="form-control" id="addCategory" name="addCategory">
                        </div>

                    </div>
                    <div class="modal-footer bg-dark">
                        <button type="submit" id="btnSubmit" class="btn btn-success">Submit</button>
                        <button type="button" id="btnDismiss" class="btn btn-primary" data-dismiss="modal">Back</button>
                    </div>
                </div>
            </div>
        </div>
    }
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Pass (Send) data from Bootstrap Modal Popup to Controller in ASP.Net MVC

Company

Explore

Follow us

Contact Us