{;}

bootstrap 3 model with partial view

Nov 19, 2019 08:06 AM|ohoud|LINK

hi

i am using bootstrap model to do CRUD operation with database

i have problem with update and delete function

i use these

  <button type="button" class="glyphicon glyphicon-edit " href="@Url.Action("UpdateTretment","Home",new {id=item.Id })" data-target="#UpdateTretmentsModal" data-toggle="modal" style="color:#E6E5C6;background-color:#18593D" />
                                       
 <button type="button" class="glyphicon glyphicon-remove-sign " href="@Url.Action("DeleteTretment","Home",new {id=item.Id })" data-target="#DeleteTretmentsModal" data-toggle="modal" style="color:#E6E5C6;background-color:#18593D" />

to call the bootstrap popup model and at first time it work correctly it get the row id and popup model with partial view.

but if i click one row update and then i click close button in the header model without doing submit and try to update anther row it however with data from

the first row.

when i used the debug red circle in controller i found the button doesn't recall the action till i refresh the page.

it just like it hide and show the model without recall action

bootstrap model

<div class="modal fade" tabindex="-1" id="UpdateTretmentsModal"
     data-keyboard="false" data-backdrop="static" >
    <div class="modal-dialog modal-sm">
        <div class="modal-content" >
            
        </div>
    </div>
</div>

closes button

 <button type="button" class="close" data-dismiss="modal" id ="bt"style="color:#E6E5C6;">
        &times;
    </button>

please help me to fund solution

thanks

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 05:06 PM|ohoud|LINK

nobody know answer

please it is urgent

Reply

bruce (sqlwo...

All-Star

58114 Points

15633 Posts

Re: bootstrap 3 model with partial view

Nov 19, 2019 05:51 PM|bruce (sqlwork.com)|LINK

your modal code on open just fetches html from the server. the close just hides the html. I assume the modal html has a form and submit inside. if submit is not clicked, then no save is done. opening the modal again, loads new html (the old is deleted).

if the html should be part of the page form, you need to add javascript to move the html to be a child of the form (as the modal is at the end of the body, and its contents are not part of a page form) on modal close. you will need to detect if the same item is opened again or it will be included twice.

bruce (sqlwork.com)

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 07:08 PM|ohoud|LINK

how can i do that can you provide example of javascript code?

i try to use $('.modal-body').remove();

but it destroy the body completely

so what can i do to retrieve it

Reply

All-Star

52961 Points

https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Re: bootstrap 3 model with partial view

Nov 19, 2019 07:26 PM|mgebhard|LINK

ohoud

how can i do that can you provide example of javascript code?

i try to use $('.modal-body').remove();

but it destroy the body completely

so what can i do to retrieve it

Please read the Bootstrap documentation. The docs cover how to initialize modal form fields using simple JavaScript and button tag data attributes.

IMHO, this is a clean approach because it does not require and HTTP request to overwriting the DOM. It simply sets field values when the modal opens.

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 07:49 PM|ohoud|LINK

i try to use this to reload the html partial view in model content

$('#UpdateTretmentsModal').on("hidden.bs.modal", function () {
$(".modal-content").html("");
});

then

function myFunc(id) {
myurl = "/Home/UpdateTretment/" + id;
$('#UpdateTretmentsModal').on('show.bs.modal', function () {

$('#UpdateTretmentsModal .modal-content').load(myurl);
});
}

but when i click the button the background become darker but the model

content not load

Reply

All-Star

52961 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 07:54 PM|mgebhard|LINK

Perform standard troubleshooting. Open the browser's dev tools and look for errors in the console window. Take a look at the Network view and make sure there are no HTTP status errors. Use the Visual Studio debugger and set a break point. Basic traoubleshooting.

Also, you might read the link in my previous post and give it a try.

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 08:26 PM|ohoud|LINK

right now i used this two method

$('#UpdateTretmentsModal').on("hidden.bs.modal", function () {
$(this).data('bs.modal', null);
});

and

$('#UpdateTretmentsModal').on('show.bs.modal', function () {

$('#UpdateTretmentsModal .modal-content').load(myurl);
});

it works fine and call the controller action but only in Babbage v but in deploying it is not working

and i try to use browser's dev tools in network i can see it says

HTTP Error 404.0 - Not Found

Reply

All-Star

52961 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 08:33 PM|mgebhard|LINK

Please do not make us guess. What URL is not found?

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 08:51 PM|ohoud|LINK

when i click the button the bootstrap model work fine and the URL of partial view load correctly with data but when i close it without refreshing and then click anther row button bootstrap model load previous partial view and

and i try to use browser's dev tools in network i can see it says

HTTP Error 404.0 - Not Found

Reply

All-Star

52961 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 08:56 PM|mgebhard|LINK

Thanks for the steps to reproduce but what URL is not found? Click on the 404 error to see the HTTP request.

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 09:09 PM|ohoud|LINK

the page of second partial view

Reply

All-Star

52961 Points

Re: bootstrap 3 model with partial view

Nov 19, 2019 09:45 PM|mgebhard|LINK

ohoud

the page of second partial view

And that URL is what exactly? Is it /Home/UpdateTretment/2? What is "the page if second partial view"?

Perhaps the URL is an empty string? Or there is a typo in the URL? Or the URL is missing a route parameter?

At this point I recommend posting all the relevant code do we can see what you are doing. Please use the "Insert/Edit code sample" toolbar button when sharing code on the forum. The button looks like a

{;}

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 20, 2019 06:30 AM|ohoud|LINK

button to call update bootstrap model

<button id="btn" type="button" onclick="myFunc(@item.Id);"class="glyphicon glyphicon-edit"  href="@Url.Action("UpdateTretment","Home",new {id=item.Id })" data-target="#UpdateTretmentsModal" data-toggle="modal"  style="color:#E6E5C6;background-color:#18593D"> إضافة </button>

bootstrap model

<div class="modal fade" tabindex="-1" id="UpdateTretmentsModal"
     data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

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

controller action to call partial view

public IActionResult UpdateTretment(int id)
        {
            List<Mtrole> Rolelist = new List<Mtrole>();
            Rolelist = context.Mtrole.ToList();
            ViewBag.ListOfRole = Rolelist;
            var tretmant = context.FreTreatment.Find(id);
            return PartialView(tretmant);
        }

partial view

@model projectname.Models.FreTreatment

<div class="modal-header" style="background-color:#18593D;">
    <button type="button" class="close" data-dismiss="modal" id ="bt"style="color:#E6E5C6;" aria-label="Close" >
        &times;
    </button>
    <h4 class="modal-title" style="color:#E6E5C6;">تعديل</h4>
</div>
<div class="modal-body" style="background-color:#E6E5C6;">
    <form asp-action="UpdateTretment">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="DoctorName" class="control-label" style="color:#18593D;">اسم الدكتور</label>
            <input asp-for="DoctorName" class="form-control" style="color:#18593D;" />
            <span asp-validation-for="DoctorName" class="text-danger" style="color:#18593D;"></span>
        </div>
        <div class="form-group">
            <label asp-for="Type" class="control-label" style="color:#18593D;">إختصاصه</label>
            <select asp-for="Type" class="form-control" asp-items="@(new SelectList(ViewBag.ListOfRole,"RoleArabic","RoleArabic"))" style="color:#18593D;"></select>
            <span asp-validation-for="Type" class="text-danger" style="color:#18593D;"></span>
        </div>
        <div class="form-group">
            <label asp-for="Date" class="control-label" style="color:#18593D;">تاريخ الجلسة</label>
            <input asp-for="Date" class="form-control" style="color:#18593D;" />
            <span asp-validation-for="Date" class="text-danger" style="color:#18593D;"></span>
        </div>
        <div class="form-group">
            <label asp-for="Name" class="control-label" style="color:#18593D;">اسم الجلسة</label>
            <input asp-for="Name" class="form-control" style="color:#18593D;" />
            <span asp-validation-for="Name" class="text-danger" style="color:#18593D;"></span>
        </div>
        <div class="form-group">
            <label asp-for="Notes" class="control-label" style="color:#18593D;">الملاحظات</label>
            <input asp-for="Notes" class="form-control" style="color:#18593D;" />
            <span asp-validation-for="Notes" class="text-danger" style="color:#18593D;"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="حفظ" class="form-control" style="color:#E6E5C6;background-color:#18593D" />
        </div>
    </form>
</div>


<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validate/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

i am using these two model to refresh the model content and to make the button call the action

 var myurl;
        function myFunc() {
            myurl = "/Home/Test/";
            $('#UpdateTretmentsModal').on('show.bs.modal', function () {
                $('#UpdateTretmentsModal .modal-content').load(myurl);
            });
        }
        $(document).ready(function () {
        $('#UpdateTretmentsModal').on("hidden.bs.modal", function () {
                $(".modal-content").html("");
        });
        });

Reply

Member

1 Points

Re: bootstrap 3 model with partial view

Nov 20, 2019 06:25 PM|ohoud|LINK

thank you everyone i found the solution

Reply

All-Star

52961 Points

Re: bootstrap 3 model with partial view

Nov 20, 2019 06:51 PM|mgebhard|LINK

ohoud

thank you everyone i found the solution

What was the solution?

Reply

Member

1 Points