1

I have an ASP MVC application and I am trying to open a Bootstrap modal from my test.cshtml view using Ajax.ActionLink. It is opening fine, but the controls (checkbox and radio button) are not clickable. This only happens when I use Ajax.ActionLink.

test.cshtml:

@{
    Layout = "";
}
@{
    ViewBag.Title = "test";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.2.0.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    @*<script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/respond.js"></script>*@
</head>

    <script>
        function ShowPopup() {

            $("#divmodal").attr('data-toggle', 'modal');
            $('#divmodal').modal('show');
        }
    </script>
<body>
    <h2>test</h2>
    @Ajax.ActionLink("Open using Ajax Link!", "test", "Home", null, new AjaxOptions { UpdateTargetId = "divresponse", OnComplete = "ShowPopup" }, new { @class = "btn btn-info btn-sm" })

    <div class="modal fade" id="divmodal" tabindex="-1" role="dialog">
        <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">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <label>Check Box</label>

                        <input type="checkbox" name="vehicle"   value="car"> 


                        <input type="checkbox" name="vehicle" value="Bike">  
                    <br />
                    <label>Radio Button</label>
                    <input type="radio" name="rdb"/>
                    <input type="radio" name="rdb"   />


                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
</html>

and the controller code ==Homecontroller= is simple : 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TestQuestionsAnswers.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /test/

        public ActionResult test()
        {
            return PartialView();
        }
    }
}
alex
  • 6,818
  • 9
  • 52
  • 103
JPNN
  • 383
  • 1
  • 7
  • 23
  • Not sure, but maybe this link might help: http://stackoverflow.com/questions/5586327/how-to-use-ajax-actionlink – alex Feb 17 '16 at 20:33

0 Answers0