using bootstrap Modal in ASP.net MVC 4

Question

I want to add a modal in my project, so I folowed this Question but when I click on my Ajouter demanderbutton nothing appears(my modal dosn't appear). This my code :
Partial View :

@model pfebs0.Models.DEMANDE

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Ajouter un demande</h3>
</div>
<div>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="modal-body">
        <div class="controls">
            <label for="Citoyen_CIN" >CIN(Nom) du demandeur</label>
            @Html.DropDownList("CIT_CIN", String.Empty)
            @Html.ValidationMessageFor(model => model.CIT_CIN)
        </div>
        <div class="form-group">
            <label for="Description">Description d'offre</label>
            @Html.TextAreaFor(model => model.DESCREPTION)
            @Html.ValidationMessageFor(model => model.DESCREPTION)
         </div>
        <div class="form-group">
            <label for="Observation">Observation</label>
            @Html.EditorFor(model => model.OBSERVATION)
            @Html.ValidationMessageFor(model => model.OBSERVATION)
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-default">Valider</button>&nbsp; &nbsp;
            <button type="reset" class="btn btn-default">Fermer</button>&nbsp; &nbsp;
       </div>
      </div>
}

</div>

Details View (I puted only Modal code to avoid having long code ) :

 <button class="btn btn-primary CreateDM" data-id="@Model.CIT_CIN">Ajouter demander</button>
    <div class="modal hide fade in" id="CreateDM">
      <div id="CreateDM-container"></div>
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.createDM').click(function () {
            var url = "/Citoyen/CreateDM"; // 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) {
                $('#CreateDM-container').html(data);
                $('#CreateDM').modal('show');
            });
        });
    });
 </script>

CreateDM action :

[HttpGet]
        public ActionResult CreateDM(decimal id)
        {
            var newDM = new DEMANDE();
            newDM.CIT_CIN = id;
            return PartialView("_CreateDM", newDM);
        }

So what's wrong in my code ?

Don't make it hide by default. Try
instead of
. (Remove hide). — Ishtiaq, May 02 '14 at 05:27
Check what you have in `data`. I placed your code in [**JsFiddle**](http://jsfiddle.net/Nicolai8/cj57q/1/) just witout ajax request and it works correctly. So your code should be ok. — Nicolai, May 02 '14 at 06:32
yeah It work's Fine `CreateDM` Look I think I got error in the Call Function when I click on my button I should call The link like this `/citoyen/createDM/@Model.cit_CIN`. example : `citoyen/createDM/4547` or `citoyen/createDM/13403694` ... — Chlebta, May 02 '14 at 20:31

score 0 · Accepted Answer · answered May 02 '14 at 05:52

0

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

answered May 02 '14 at 05:52

JB06

1,881
14
28

Are you getting any errors or does it just do nothing when you click the button? Set a breakpoint on your controller action to see if it's ever getting to the action. – JB06 May 03 '14 at 22:56

using bootstrap Modal in ASP.net MVC 4

1 Answers1