Part 20- Add Edit Record using Partial View , JQuery and bootstrap popup(Modal) in ASP.NET MVC

OVERVIEW
Hello , In this tutorial you are going to learn about add edit record using Partial View which will bring a form ,Jquery which call partial view using ajax and bootstrap modal which will be working as popup .
CONTACT US: [e-mail]
SOCIAL :
Like TechnoTips official Page : / technotipstutorial
Subscribe : / aapkanigam
Follow us on Twitter : @technotipsMVC
Get CODE HERE:
technotipstutor...
INTRODUCTION :
Insert your form in partial view and call it using jquery.Then perform add edit operation using jquery .
RECOMMENDATION:
1. Part 14 insert data using JQuery : • Part 14- Insert data i...
2.Bootstrap Popup modal : • Bootstrap Tutorial - #...
TAGS :
Partial view in mvc
html.partial
html.RenderAction
how to create a - website
how to create bootstrap popup modal
asp. net mvc
asp.net mvc interview questions
asp .net mvc tutorial
asp. net mvc 4
asp.net mvc 5 tutorial
asp net mvc developer
asp net mvc continuous integration
asp net mvc hosting
model view controller
jquery-ajax Post
$ ajax jquery
jquery ajax tutorial
viewbag
$controller
$model
razor view engine
how to create bootstrap popup modal

[@robertga12]

LOL the ankward silense while closing the avast tab made my day, great video thanks

[@aapkanigam]

Thank You, keep learning and teaching ☺

[@tharindumindada4836]

i was struggling for a week to do this Thanks a Lot Bro.....

[@aapkanigam]

Thanks keep learning and sharing

[@anggitahananprimasanti2464]

thank you for the tutorial

[@quadritalha6393]

Thanx for explaining this concept in such a simple way.

[@kirankumari-nz8lr]

thanks for making such videos .Its helped me a lot ..keep it up

[@nhatminh6339]

Hope you make more video about .NET Core!! Thank you very much !!

[@jacobcrosby101]

Thank you for your help.

[@augustinomateso5568]

Thank you for a good tutorial, I'm able to follow your instructions but it seems validation is not working on modal pop up. Is there a way to use partial view on modal popup and still be able to use validation from the model properties...!?

[@aapkanigam]

+Augustino Mateso Ya validation will not work as you are submitting form using JQuery. To apply validation use yourform.valid () method which will return true if form is validated .Then you can show some message just below textbox if form not validated.Please dont forget to include Validate.min file reference and jquery unrobustive file .The second option is to check if each textbox is empty and undefined then show message .

[@augustinomateso5568]

Thank you @Techno Tips, second option is okay, I will have a look on first option also to see its flexibility. Also I have another question, during post of a modal form by AjAX, the url part works okay if I'm running directly from visual studio. But if I deploy an application on my local IIS the url part seems not to be correctly called. I have tried to use @Url.action("action", "controller") but no success. Do you have any suggestion on this...!? Thank you again

[@navzme]

Thanks for awesome video

[@vinodcobraz]

Thanks for the wonderful explanation. In my code the update function is working the first time and then when I try to update another record the modal does not proceeds with update. What could be causing the error?

[@bilalyousuf6814]

Thanku sir :) one thing to ask you ,how can we get site name also to be edited (when we are updating)

[@aniljain50]

Thanks for the wonderful tutorial.
In the partialvew2 there is no need to send serialized data if we use Begin form statement.
Also after I add a new record how should I stay in the Partialview2 to add another record without the partial view getting closed.

[@aapkanigam]

+Anil Jain thnks ..keep learning and sharing.. if you want to add another record then dont close your modal ..also after inserting data, clear the content of your textbox and write another value .But in this case you need to append inserted data to list ..instead of reloading page to show updated list .

[@aniljain50]

When I click on the submit button after executing the submit procedure the modal disappears!!

[@aapkanigam]

+Anil Jain Ya this is because .. there may be code written to close current modal . Like this $("myModal").modal ("hide"); .. You have to remove this from ajax response.

[@aniljain50]

No Ashish Tiwary.. there's no code to hide. I'll figure out a way. But your response is too quick!! Keep it up!!

[@aapkanigam]

+Anil Jain thanks ..dear its written in code ..just before window.location.href in ajax call.. are you watching part 20? ..please check at 21:51 min in video.

[@ManuelRBercian]

Great, congratulations!! and thanks

[@aapkanigam]

+Manuel Ramirez thank..keep learning and sharing

[@suhaspatil5054]

hello please share crud operation in asp.net mvc

[@vinayakjambhale5985]

Thanks Ashish Sir, Its Working Perfectly...My Complete Form is Edited & saved in Database..but i didnt get Image URL in ajax to post in my controller..How can i Edit Image Using this Part20?

[@aapkanigam]

watch part 32, 33, 34 for image upload

[@topcat5992]

myform.serialize is always sending a null model to the controller. I have tried Json.Encode(my model) and still I am unable to get an updated model. Any thoughts?

[@serhattural3168]

After clicking save button page is refreshing. How can we prevent refresh?

[@kaushikbhadani4227]

excellent!!

[@aaronaaronaaron5922]

very, very Thanks!!!

[@MainUddin-rd5ck]

sir, thank you form nice tutorial, it is working fine in local machine, but not working after host....

[@satyajitbhapkar7273]

Thanks Sir

[@Yoftahie1]

Thank you

[@aapkanigam]

+Yoftahie Suleiman your welcome . Please share this if you find this useful.

[@AlviRacingClub]

Hi Ashish, first of all, great videos, you are teaching me how to program, so keep it going! I´m having a problem when i try to serialize the modified model from the form in the partial view. It returns var varName = "". Because of this, the model that enters the post controller method has only nulls. Do you know what might be my problem?

[@aapkanigam]

+Alvi Roces Cortez Thanks. Have you tried the code that I have shared.Please find link from the description. There might be possibility of getting error in jquery. Try to debugg that and tell me what error are you getting.

[@AlviRacingClub]

The jquery returns no error, it just gets the $("#myForm").serialize() equals to null("") and then continue running

[@AlviRacingClub]

Oh my bad, it gives: POST localhost:49764/Test/Index 500 (Internal Server Error) VM108:23
and when i expand it,
send @ VM108:23
ajax @ VM108:23
(anonymous) @ VM110:13
dispatch @ VM108:22
v.handle @ VM108:22
I don´t know what it means, i would really apreciate your help, thank you very much

[@aapkanigam]

+Alvi Roces Cortez make sure you are not submitting any file with this serialize method

[@jaylovett2237]

Hello Ashish, Awesome tutorials! How would you implement validation in the modal? I have watched part 12 and 29 but those don't seem to apply to the modal. Thanks -

[@aapkanigam]

+Jay Lovett thanks .. make sure to keep your controls in form tag. If you are getting input control from partial view then write your js code in partial view instead of main view. In main view you can write code for opening and closing modal. You can also get code for each video , the link is given in the description

[@narendarsingh4672]

very nice sir

[@aapkanigam]

Thanks .. keep learning and sharing 🤗

[@narendarsingh4672]

@@aapkanigam you are great sir,very nice your way of teaching style.thanks a lot.

[@mucahidakyar766]

thank you so much for Awesome videos ? I have a question
var url="/Test/AddEditEmployee?EmployeeId="+employeeId;
$("#myModalBodyDiv1").load(url,function(){
$("#myModal1").modal("show");
})
when i write this part, it is not load partial view in modal and i take 404 (not found) error ..
What should i do ?

[@aapkanigam]

+mücahid akyar Please try the code from the link given in description

[@mucahidakyar766]

i tried it but i use entity framework 6 . Can it be a reason for error ?

[@aapkanigam]

+mücahid akyar it should not . Have you created a partial view and a method which will return this.

[@AminVincent]

great tutorial, but in partial2 you didn't hide modal after clicking save or update cz firstly you have given the name of modal in index.cshtml is myModal1 but in partial2 you hide that modal by calling myModal so if i try this it doesn't work for me...But in your code tutorial above it's work in me not..

[@zhandossaukmanov3229]

Where I can download full source code?

[@jhonhernandez9210]

And the contact with the data base? you are not using ADO... so the web config data base connection is missing

[@mohamedsuhathsinnalebbe861]

i faced this type of problem Uncaught TypeError: $(...).modal is not a function pls help

[@murtazaahmed8229]

Hey Bro can you tell me how to implement validation in these field i'm trying but validation message not showing this is modal validation
([Required(ErrorMessage = "This Field is Required")]
public string StudentName { get; set; })
clientsite validation message
(
@Html.TextBoxFor(m => m.StudentName, new { @id = "StuName", @class = "form-control", @placeholder = "Name*" })
@Html.ValidationMessageFor(m => m.StudentName, "", new { @class = "text-danger" })
)
if i empty any field form not submit is good but no message show

[@aapkanigam]

+Murtaza Ahmed watch part 29 or part 12

[@aapkanigam]

+Murtaza Ahmed also, dont give ID to your studentName textbox. You can excess textbox in jquery by using StudentName as id

[@harirajanala9865]

Bro Where is Git Hub Code For This...?

[@ashishpatil9559]

Why are you working on only one page

[@murtazaahmed8229]

Bro My Validation not working form submit null :(

[@aapkanigam]

+Murtaza Ahmed watch part 29 or part 12

[@achalprajapati1192]

Nice tutorial and great method .. can you provide source code on my mail id.?

[@aapkanigam]

+Achal Prajapati thanks.. source code link is given in description box

[@dattatreyakulkarni541]

Here mising validate and I didn't come to know why you are refreshing page. Dont take negative

[@raghvendramishra9766]

speak loudly sir jee..