I had user control in MVC ASP.NET which list the comments for particular image. I had given delete link with every comment. Now i want to delete that comment using Ajax link. Please tell me how can I use Ajax?
This is my user control and I am calling controller action on delete link:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ListComment.ascx.cs" Inherits="gConnect.Views.Shared.ListComment" %>
<li>
<div class="question-info">
<div class="votes count"></span><span><% Response.Write("<img src=../../images/" + ViewData.Model.Logo_url.ToString() + " width=75 height=100 >");%> </div>
<div class="views "><span><%= ViewData.Model.Username.Substring(ViewData.Model.Username.IndexOf("-")+1) %></span></div>
<div class ="deletem" ><span><%= Ajax.ActionLink("Delete", "DeleteComment/" + ViewData.Model.Username.Substring(0, 2) + "." + ViewData.Model.Id, new AjaxOptions(UpdateTargetId = "comments"))%></span></div>
<div class="question">
<h3 class="title"><%= Html.Encode(ViewData.Model.Comment )%></h3>
</div>
</div>
</li>
Use jQuery:
<script type="text/javascript">
function deleteComment(id) {
$.post(
"/MyController/DeleteAction",
{ id : id }
function (data) {
// do some gui updates
});
}
</script>
And use in a link:
<a onclick="deleteComment(<%= CommentId %>); return false;" href="#">Delete</a>
Use an Update Panel. It will capture the post back from your delete link and asyncronously reload the content.
Take a look at http://www.asp.net/ajax/documentation/live/Tutorials/CreatingPageUpdatePanel.aspx for an example.
Hope that helps.
Gavin
First, make sure that your delete link posts a form. Your question is not clear about this, but since you say that you are using a delete link I am guessing that you are doing this with a GET. Actions that modify resources should be done via POST, not GET.
Once you've done that, you can use the jQuery AJAX form plug-in to do the post via AJAX. It's quite simple, and once you have a working form to do that delete, you will find converting its to use the AJAX plug-in to submit the form instead very straightforward. Just follow the examples on the site.
Related
Hi In my rails application on one page I have links which links to another page which will call some APIs, so that page loads slowly. I need some indication till the page renders, how to accomplish this? I have searched most of them says solution for AJAX request but here its not a ajax request.....
Add in your application.js
$(document).ajaxStart(function(){
showloader()
});
$(document).ajaxStop(function(){
hideloader()
});
function showloader(){
$(".main-loader").show()
}
function hideloader(){
$(".main-loader").hide()
}
Add in your application.html.erb
<div class="main-loader" style="display: none;">
<div class="loader-div"> <%= image_tag "loader.gif" %> </div>
</div>
And Also Add loader image in your assets images folder
Currently in a link
Customer/businessunit/RepresentativeDetails?RepresentativeId=cd3a7263-78f7-41bd-9eb0-12b30bc1059a
I have following code for view
#Html.ActionLink("Back to List", "Index")
which takes me to this link
customer/businessunit/index
but rather that going to index page I want to go to previous page when the actionlink is clicked, which is
Customer/businessunit/BusinessUnitDetails/c4a86253-a287-441e-b83d-71fbb6a588bc
How do I create an actionlink that directs me to previous page?
something like #Html.ActionLink("Back to Details", //go to previous page)
Unless you're tracking what the previous page is on the server, why not just use the browser's internal history? In that case there wouldn't be a need for server-side code. You could just use something like this:
Back to Details
Or, separating the code from the markup:
Back to Details
<script type="text/javascript">
$(document).on('click', '#backLink', function () {
history.go(-1);
});
</script>
This would send the user back to whatever was the last page in their browser history. (Of course, if they reached that page from any other source then it wouldn't take them "back to details" but instead just "back".)
If you still want to use ActionLink you can do something like as suggested by JuanPieterse
#Html.ActionLink("Back to previous page", null, null, null, new { href = Request.UrlReferrer})
You can use action in controller too. See answers to similar question here
Don't use ActionLink for this... just do:
Back to List
...which will take the user back to wherever they were prior to the current page
If you don't like to use ActionLink or JavaScript, the href="#Request.UrlReferrer" will do the trick:
<div>
<a href="#Request.UrlReferrer" class="btn btn-default btn-lg" title="Back to list">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
</a>
</div>
This is quite a bit after the fact, but I thought I'd contribute. Personally, I would tag my markup elements with a CSS class so I could just reuse the tag and be done with it.
Markup:
Back
Script:
<script type="text/javascript">
$(function () {
$('.go_back').click(function (e) {
e.preventDefault();
history.go(-1);
});
});
</script>
Use ActionLink:
#Html.ActionLink("بازگشت", null, null, null, new { href = Request.UrlReferrer })
i know this is too late but i got this answer.
<button type='reset' class='btn btn-danger' onclick='window.location.go(-1);'><i class='fa fa-ban'></i> Cancel </button></div>
I am trying to do the following:
The object I give to the Viewpage has a list, I do a foreach in the HTML and I create a number of components. Now, I want the IDs of those components to somehow be linked to the object from the List.
(The reason I am trying to do this is because I want to show a button, when they press that button the shown content will change and they should see something else, I will use javascript to achieve this)
Therefor I am trying to make the id of those components dynamic, by for example stating
id="button <%= item.id%>" however this does not seem to work. I have searched alot on google but I haven't found a solution yet which is why I turn to you guys.
I'll link my code as well, I deleted some of the parts that were unnecessary (but added the javascript):
<script type="text/javascript">
function AlterPanel(thePanel) {
var panel = document.getElementById("region"+thePanel);
panel.style.display = 'block';
var button = document.getElementById("button"+thePanel);
button.style.display = 'none';}
</script>
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a id="button<%= team.Number %>" onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div Visible="false" id='region<%= team.Number %>' runat="server">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I eagerly await a reply and thank you in advance.
I guess your Queastion is:
-you have some "button DropDownList" pair, button is visiable, DropDownList is invisible, now if user click the button then DropDownList will showup.
OK, now your View maybe :
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div id="region<%= team.Number %>" style="display:none">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I use JQuery in javascript part like this:
<script type="text/javascript">
function AlterPanel(thePanel) {
$("#region" + thePanel.toString()).css("display", "block");
}
</script>
Don't forget include the following file in View():
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script>
if the answer is not what you want, let mt know and I can help you~ :)
I have a BlogPost resources, where in BlogPost 'show' screen, I want a "new comment" button to be displayed and only on clicking that button I want the new Comment template to be rendered into the same page. I would like to use ajax concept to do this. How do I do this?
NOTE: I have BlogPost and Comment as seperate resources(plural)
Resources I've defined in my routes looks like this:
map.resources :blog_posts, :has_many => :comments
EDIT: For a better idea, the 'add comment' link just below a question in stackoverflow
I think all you need to do is render the comment box (the HTML markup) on page load but give it a CSS rule to be hidden ( <div id='comment' style="display:none"> ... comment markup ... </div> ). Then add a link just above or below that div to show the div and hide the "add comment" link using js (like jquery).
Something like this:
<script type='text/javascript'>
function fade_some_stuff(){
$('#comment_link').click( function(){ $('#comment').fadeIn(); $('#comment_link').fadeOut(); });
}
</script>
<a href="#" id='comment_link'>add comment</a>
<div id='comment' style="display:none;">
...
</div>
I believe you need something like this... http://jqueryui.com/demos/dialog/#modal-form
Please go through the documentation provided at the bottom to implement this in your App.
Good Luck!
I have a partial view in MVC that goes something like:
<div id="comments">
...
</div>
Inside that div there's a form that calls a controller using AJAX and gets back that same partial view. The problem is that the results of calling the view replaces the contents of the div, not the whole div, and I end up with:
<div id="comments">
<div id="comments">
...
</div>
</div>
The only solution I can think about with my week of experience in ASP.Net MVC and AJAX is to put the div outside the partial view and make the partial view only contain the inside part, but then the form would refer to an id outside the view where the form is located breaking the little encapsulation I have left there. Is there any better solution?
The unobtrusive Ajax library that ships with .NET MVC 3 uses callbacks that are based on the four callbacks from jQuery.ajax. However, the InsertionMode = InsertionMode.Replace from the Ajax.BeginForm method does not result in jQuery's replaceWith being called. Instead, .html(data) is used to replace the contents of the target element (and not the element itself).
I have described a solution to this problem on my blog:
http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html
Are you using an AjaxHelper.Form or jQuery. If you are using jQuery, have you tried using replaceWith()? Using AjaxHelper are you using AjaxOptions { InsertionMode = InsertionMode.Replace }? I would think that using either you would be able to replace the entire DIV with the results from the partial view.
Using
AjaxOptions { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace }
should replace the whole content of '#myDiv' element, as tvanfosson says. Your problem is where is '#myDiv' located. Here's an example:
<div id="myDiv">
<% Html.RenderPartial("MyPartialView"); %>
</div>
where MyPartialView is:
<div id="comments">
<% using (Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace } )) {%>
...
<input type="submit" value="Submit comment" />
<% } %>
</div>
If you include '#myDiv' div inside the partial view, it will be rendered right after receiving the response (together with its content), and then it's content will be replace with the response which is the same partial view (including its own '#myDiv' div), and that's why you always end up with 2 nested divs.
You should always use a container for your partial views and then set the UpdateTargetId to the container id.
Edit: I updated the code to represent the exact situation you describe in your question.
I had this same problem in Asp.Net MVC 5.
I did not want the PartialView to have some knowledge about what div it might be contained within, so I did not accept that work around.
Then, I noticed the other answers referring to ReplaceWith and found the simple solution:
InsertionMode = InsertionMode.ReplaceWith
Now, the mvc partial view can completely replace itself with the ajax helpers without having any dependencies on names outside itself.
Your should try with jQuery too (from my answer on MS MVC form AJAXifying techniques):
<script type="text/javascript">
$(document).ready(function() {
ajaxify($('div#comments'));
});
function ajaxify(divWithForm) {
var form = $('form', divWithForm);
$(':submit', form).click(function (event) {
event.preventDefault();
$.post(form.attr('action'), form.serialize(),
function(data, status) {
if(status == 'success') {
var newDivWithForm = $(data);
ajaxify(newDivWithForm);
divWithForm.after(newDivWithForm).remove();
}
}
);
});
}
</script>
Did you solved the problem? I had the same issue but I found this:
http://buildingwebapps.blogspot.ro/2011/11/jquerys-replacewith-and-using-it-to.html
I hope it helps you.