I have a partial view inside a div with id 'rating'. So I have a ajax link inside the same partial view. So when I click on the link its updating one time and if i click the link second time, its loading the div two times and clicking three times load multiple times.
Anybody have the same issue?
<div class="rating">
#Ajax.ActionLink("Flag this review as inappropriate", "CourseRatingFlag", "Content", new { cID = Model.courseRatings[index].crid}, new AjaxOptions() { HttpMethod = "POST",TargetId="rating" })
some content...
</div>
There is a similar question here.
In my case, I resolved it locating the target div out of the partial view.
Related
I'm trying to get a partial view to load on my current view when the user clicks the link but it keeps loading the partial view rather then on the same view.
Not sure what I'm missing.
Main View Controller
public PartialViewResult MonitorDetail(MonitorType mType)
{
return PartialView("MonitorDetail", mType);
}
Main View
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<p class="lbutton radius">
#Ajax.ActionLink("SQL Cluster Online ", "MonitorDetail", "NOCCon", MonitorType.AHSSQLCluster, new AjaxOptions() { UpdateTargetId = "monitorDetail" })
<span class="lbutton-addition #(Model.SQLClusterOnline ? "online" : "offline")">
#(Model.SQLClusterOnline ? "Online" : "Offline")
</span></p>
<div id="monitorDetail"></div>
Partial View
#model PAL.Intranet.MonitorType
<div>
You choose #Model.ToString()
</div>
Also keeps telling me mType is null but i'm passing it MonitorType in the ActionLink so I added it as nullable so I can try and figure out the first issue and then work on the second.
If its displaying only the partial view, its because you have not included the required files for Ajax.ActionLink to work (and its just performing a normal redirect). Ensure you have included jquery.{version}.js and jquery.unobtrusive-ajax.js
The reason parameter mType is null is because you are not passing a value. It should be
#Ajax.ActionLink("SQL Cluster Online ", "MonitorDetail", "NOCCon", new { mtype = MonitorType.AHSSQLCluster }, new AjaxOptions() ....)
All,
I have an Html.Actionlink that calls a method in my controller and should return a partial view. My partial view is displayed within Index.cshtml, the partial view is _ServerStatusList.cshmtl.
View
#using (Html.BeginForm())
{
#Html.ActionLink("Start",
"StartServer",
null,
new { #class = "startButton" })
}
Controller
[HttpGet]
public PartialViewResult StartServer(Model model)
{
model.StartServer("server01");
return PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers);
}
Right now upon clicking the start button all of the functionality works correctly as far as starting the server goes, but it returns the incorrect view. After clicking I get redirected to localHost/home/StartServer and it says "running" (as a started server should say in my server list) on a blank page. Then if I manually navigate to my server status page via the address bar it shows the server is running (as it should say) in my _ServerStatusList.cshtml.
I used an Ajax ActionLink in another part of my project to click a button and return a partial view. I tried it for this button too using this code.
<input id="StartButton" type="image" value="submit" src="~/Images/start.png" alt="Start" height="25" />
#Ajax.ActionLink("Start", "StartServer",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CurrentView"
}
)
Clicking the button does not work but clicking on the word "start" does something similar to the Html.ActionLink. If I click the Start link it takes me to Index.cshtml, displays running in the area where the partial view should be, but does not load _ServersStatusList.cshtml. Again upon manual redirection everything is as it should be, running and correctly formatted.
How can I have the Ajax ActionLink use the image as the button, and upon clicking the image, return the correct partial view?
Thanks
MVC is smart enough to find the view you need, so change your return PartialView from:
PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers);
//To
PartialView("_ServerStatusList", model.Servers);
This should return the correct view :).
I'm new to MVC (MVC3) so not sure about the best way to implement this.
I want to create a single "main" view (not strongly-typed). This "main" view will contain multiple strongly-typed partial views that each contain a form. Each partial view will therefore post back to their own POST action that does whatever. The problem I see is that when a partial view posts back, it needs to only update the partial view itself and not affect the other partial views on the page.
When I postback from a partial view now, it just returns the partial view alone back, rather than the entire "main" page.
How can this functionality be achieved in MVC3? (from a high-level perspective)
Thanks
You can post data by AJAX.
In my example I use jQuery:
<div id="first-form" class="form-container">
#Html.Partial("FirstPartial")
</div>
<div id="second-form" class="form-container">
#Html.Partial("SecondPartial")
</div>
// and here go rest forms
Your partial view may be following:
#model YourModelClass
#using (Html.BeginForm())
{
// some fields go there
}
<input type="button" value="Save Form Data" class="save-button"/>
Js would be following:
$("input.save-button").on("click", function () {
var button = $(this);
var container = button.closest("div.form-container");
var url = container.find("form").attr("action");
container.busy($.post(url, function (response) {
container.html(response);
}));
return false;
});
I am using ordered list design to to make my twitter app to view the tweets. Every Time I call the ajax insert, it puts puts another copy of the ajax link on the page . I am just trying to get the next set of tweets from the controller and inserting them so it lines up. I have tried moving the tags around and but the additional ajax buttons keep showing up.
Thinking it was a css problem i stripped it all out. Wasnt the issue. I will have to reformat my list again to put the closing and openning tags before and after the code block.
I just tried to putting it in a partial view and I put the ajax code in the layout.
Ajax Action Link
#Ajax.ActionLink("Update Tweets", "Index", "Home",
new AjaxOptions
{
UpdateTargetId = "TweetBox",
InsertionMode = InsertionMode.InsertBefore,
HttpMethod = "Get",
})
Partial View
<div id="TweetBox">
<div class="TwitterMessageBox">
<ol>
<li class="TweetLineBody">
#foreach (var item in Model)
{
#Html.Hidden(item.StatusId, item.StatusId)
<div class="TwitProfileImage">
<img src=#Url.Content(item.ImageUrl) alt="#item.ScreenName" />
</div>
<div class="TwitRealName">
#item.User
</div>
<div class="TwitNickName">
#MvcHtmlString.Create(#Html.Namify(#item.ScreenName))
</div>
<div class="TweetText">
#MvcHtmlString.Create(#item.Tweet)</div>
<div class="TweetTime">
#Html.RelativeDate(#item.Created)</div>
<div class="TweetRating">
Rating</div>
}
</li>
</ol>
</div>
</div>
The Controller is just a basic Enumerable List on the Home/ Index
This is the behavior
Lets say you have an ajax call that gets data from a controller action. It inserts before on a targetid thats a div id.
The initial view is perfect
AJAX UPDATE HTML LINK // You click it to get the controller invoke the ajax and get the data
Tweet 1
Tweet 2
etc = its perfect and aligned
You click the Ajax action link in your webpage, It goes out and gets the data but adds a second like like this
AJAX UPDATE HTML LINK
AJAX UPDATE HTML LINK
Tweet 1
Tweet 2 // alignment is still perfect but you have the 2nd ajax links
Now click the ajax link a 3rd time
// alignment is still perfect but you have the 2nd ajax link at top and one sandwiched
AJAX UPDATE HTML LINK
AJAX UPDATE HTML LINK
Tweet 1
Tweet 2
// alignment is still perfect but you have the 2nd ajax link at top and one sandwiched
Plus the Tweets results
AJAX UPDATE HTML LINK
Tweet 1
Tweet 2 // alignment is still perfect but you have the 2nd ajax links at the top and a 3rd List is inserted betweet 2/3
Controller Code per request:
public class HomeController : Controller
{
//
// GET: /Home/
private TwitterContext twitterCtx;
public ActionResult Index()
{
twitterCtx = new TwitterContext();
List<TweetViewModel> friendTweets = (from tweet in twitterCtx.Status
where tweet.Type == StatusType.Public
select new TweetViewModel
{
ImageUrl = tweet.User.ProfileImageUrl,
UserId = tweet.UserID,
User = tweet.User.Name,
ScreenName = tweet.User.Identifier.ScreenName,
StatusId = tweet.StatusID,
Tweet = HomeController.AddWebAndTwitterLinks(tweet.Text),
Created = tweet.CreatedAt
})
.ToList();
return View(friendTweets);
}
My Desired Behavior is 1 ajax link to call the controller and the data inserts
Without seeing all the code, I can only assume you don't have your views sorted out. Your controller appears to be returning the full Index view. If you put your tweet box into a partial view, your ajax action needs to be returning that partial view.
Here is my quandary. I have an MVC 3 web site, and I have a page that needs to contain a sub-form, if you will, to collect some data related to my model. I have successfully created a partial view that contains the markup and I am rendering this properly. However, the input button in the partial view doesn't seem to be doing much of anything. Here is the form in the partial view:
#using (Ajax.BeginForm("AddProductCustomField", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "addCustomFieldView" }))
{
#Html.DropDownListFor(m => m.SelectedCustomFieldId, new SelectList(Model.CustomFields, "FieldId", "FieldName"), "-- Select One --", new { #class = "int_std_select" })<text> </text>
#Html.TextBoxFor(m => m.CustomFieldValue, new { #class = "int_std_textbox" })
<input type="submit" value="Add Custom Field" /><br />
}
"AddProductCustomField" is the name of my controller method that I want to handle this form post. However, clicking the submit button does nothing. I even popped open Fiddler to see if a request was getting eaten and nothing. I've included all the appropriate JavaScript files for this page (MicrosoftAjax, MicrosoftMvcAjax and the unobtrusive JavaScript). I'm stumped.
Please let me know if I need to provide more info. Thanks much, this has been stumping me for days!
You mentioned sub-form. Do you literally mean you are nesting forms? This is not supported in HTML, so I would think that's probably the source of your problem.