首页 \ 问答 \ 如何将Html.ActionLink转换为链接到Ajax调用的按钮?(How to convert from Html.ActionLink to a button linked to Ajax call?)

如何将Html.ActionLink转换为链接到Ajax调用的按钮?(How to convert from Html.ActionLink to a button linked to Ajax call?)

我有以下代码:

 @Html.ActionLink("Edit", "Edit", new { id = user.Id },
    new { @class = "btn btn-primary btn-xs", @id="edituserbutton"})

我将其转换为按钮的部分尝试如下:

<button class="btn btn-primary btn-xs" id="edituserbutton">
      Edit
</button>

如何从html按钮版本将id = user.id传递给控制器​​,其click事件与Ajax绑定? 我的目标是使用Ajax在当前页面中调出编辑屏幕,而不是在单独的页面中导航到编辑页面(这是ActionLink编辑中发生的情况)。

$("#edituserbutton").click(function (event) 
{


                event.preventDefault();
               // alert("edit clicked");

                $.ajax({
                    url: "/Admin/Edit",
                    cache: false,
                    data: {}
                }).done(function (htmlResponse) {
                    $("#tabs-1ua").html(htmlResponse);
                });



});

tabs-1ua是我想要加载编辑页面的jqueryUI选项卡的div。

对于GET和POST,控制器中编辑方法的签名分别如下:

 public async Task<ActionResult> Edit(string id)
{
                AppUser user = await UserManager.FindByIdAsync(id);
                if (user != null)
                {
                    return View(user);
                }
                else
                {
                    return RedirectToAction("Index");
                }
 }

[HttpPost]
public async Task<ActionResult> Edit(string id, string email, string password)
{
    //code
}

谢谢。


I have the following code:

 @Html.ActionLink("Edit", "Edit", new { id = user.Id },
    new { @class = "btn btn-primary btn-xs", @id="edituserbutton"})

And my partial attempt to convert it to a button is as follows:

<button class="btn btn-primary btn-xs" id="edituserbutton">
      Edit
</button>

How can I pass the id=user.id to the controller from the html button version, whose click event is tied to an Ajax? My goal is to bring up the edit screen in the current page, using Ajax, instead of navigating away to the edit page in a separate page (which is what happens in the ActionLink edit).

$("#edituserbutton").click(function (event) 
{


                event.preventDefault();
               // alert("edit clicked");

                $.ajax({
                    url: "/Admin/Edit",
                    cache: false,
                    data: {}
                }).done(function (htmlResponse) {
                    $("#tabs-1ua").html(htmlResponse);
                });



});

tabs-1ua is the div for the jqueryUI tab I want to load the edit page into.

The signatures for the edit methods in the controller are as follows for the GET and POST respectively:

 public async Task<ActionResult> Edit(string id)
{
                AppUser user = await UserManager.FindByIdAsync(id);
                if (user != null)
                {
                    return View(user);
                }
                else
                {
                    return RedirectToAction("Index");
                }
 }

[HttpPost]
public async Task<ActionResult> Edit(string id, string email, string password)
{
    //code
}

Thank you.


原文:https://stackoverflow.com/questions/38796078
更新时间:2021-06-08 11:06

最满意答案

您可以将id值存储在data-*属性中。 像这样的东西:

<button class="btn btn-primary btn-xs" id="edituserbutton" data-id="@user.Id">
  Edit
</button>

然后在jQuery代码中检索单击按钮的值:

$("#edituserbutton").click(function (event) 
{
    event.preventDefault();

    $.ajax({
        url: "/Admin/Edit",
        cache: false,
        data: { id : $(this).data('id') }
    }).done(function (htmlResponse) {
        $("#tabs-1ua").html(htmlResponse);
    });
});

You can store the id value in a data-* attribute. Something like this:

<button class="btn btn-primary btn-xs" id="edituserbutton" data-id="@user.Id">
  Edit
</button>

Then in the jQuery code retrieve the value of the clicked button:

$("#edituserbutton").click(function (event) 
{
    event.preventDefault();

    $.ajax({
        url: "/Admin/Edit",
        cache: false,
        data: { id : $(this).data('id') }
    }).done(function (htmlResponse) {
        $("#tabs-1ua").html(htmlResponse);
    });
});

相关问答

更多

Html.ActionLink作为按钮或图像,而不是链接(Html.ActionLink as a button or an image, not a link)

迟到的响应,但你可以保持简单,并应用一个CSS类到htmlAttributes对象。 <%= Html.ActionLink("Button Name", "Index", null, new { @class="classname" }) %> 然后在您的样式表中创建一个类 a.classname { background: url(../Images/image.gif) no-repeat top left; display: block; width: 150 ...

Html.Actionlink作为按钮效果(Html.Actionlink as Button effect)

而不是让你的按钮类直接应用到链接。 在使用引导程序时,您可能需要添加btn-default以获取按钮的完整样式。 <li> @Html.ActionLink("Redeem Reward", "GetReward", "Home", new { id = price.PriceId }, new { @class = "lnkGetReward btn btn-default btn-sm"}) </li> 但是,如果您100%确定要使用Url.Action代码如下所 ...

Html.ActionLink和Ajax.ActionLink之间的区别(Difference between Html.ActionLink and Ajax.ActionLink)

基本上两者都完美无缺。 这些之间的主要区别是 - Html.ActionLink - Html.ActionLink在视图上创建一个新链接,当用户点击链接时,它不直接链接到视图,它将通过MVC路由。 它将通过路由映射到操作方法。 Html.ActionLink(test.login, "Action", // ActionMethod Name "Login", // Controller Name. ...

如何将Html.ActionLink转换为链接到Ajax调用的按钮?(How to convert from Html.ActionLink to a button linked to Ajax call?)

您可以将id值存储在data-*属性中。 像这样的东西: <button class="btn btn-primary btn-xs" id="edituserbutton" data-id="@user.Id"> Edit </button> 然后在jQuery代码中检索单击按钮的值: $("#edituserbutton").click(function (event) { event.preventDefault(); $.ajax({ url: " ...

从Html.ActionLink调用jqXHR.Abort()(Call jqXHR.Abort() from Html.ActionLink)

在带有ajax调用的文件_History.cshtml ,我在顶部添加了这个: @{ string isRedirect = ""; if (HttpContext.Current.Request.QueryString["acctHistoryRedirect"] != null) { isRedirect = HttpContext.Current.Request.QueryString["acctHistoryRedirect"].ToString() ...

Html.ActionLink as按钮不是超链接(Html.ActionLink as button not hyperlink)

将CSS类属性设置为btn 。 @Html.ActionLink("Edit", "Edit", New With {.id = currentItem.CustomerId}, New With {.class = "btn"}) Set the CSS class property to btn. @Html.ActionLink("Edit", "Edit", New With {.id = currentItem.CustomerId}, New With {.class = "btn ...

我可以像使用Html.ActionLink一样使用asp:Button吗?(Can I use an asp:Button like an Html.ActionLink?)

actionlink与webforms中的Hyperlinkbutton或Hyperlink控件相当。 它们都在html中呈现标准锚元素。 所以是的,如果你想让它看起来像一个按钮,你应该在它上面添加一些css酱。 <%: Html.ActionLink("MyAction", "MyAction", null, new { @class = "button" } %> 并在css文件中: .button { outline: 0; margin: 0 4px 0 0; ...

如何将ID添加到Html.ActionLink - 与HTML / CSS中的相同(How to Add ID to Html.ActionLink - Same as You Would In HTML / CSS)

尝试这个: @Html.ActionLink("LION TECHNOLOGIES", "Index", "Home", new { area = "" }, new { @class = "navbar-brand", @id = "navbar-text"}) Try this: @Html.ActionLink("LION TECHNOLOGIES", "Index", "Home", new { area = "" }, new { @class = "navbar-brand", @i ...

如何将锚标记HTML链接转换为使用@ Html.ActionLink(How to convert anchor tag HTML links to use @Html.ActionLink)

您不能使用现成的Html.ActionLink函数来嵌套元素。 您将不得不创建一个重载,它接受类似MvcHtmlString东西并将其插入到锚中。 public static IHtmlString ActionLink(this HtmlHelper html, IHtmlString innerHtml, string action, string controller, IDictionary<string, object> htmlAttributes) { var urlHelp ...

使用ajax ActionLink代替Html.ActionLink MVC(Using ajax ActionLink in place of Html.ActionLink MVC)

MVC足够聪明,可以找到您需要的视图,因此更改您的返回PartialView: PartialView("~/Views/Home/_ServerStatusList.cshtml", model.Servers); //To PartialView("_ServerStatusList", model.Servers); 这应该返回正确的视图:)。 MVC is smart enough to find the view you need, so change your return Part ...

相关文章

更多

最新问答

更多
  • 如何从远程文件拉取文件而不覆盖本地文件?(How do I pull files from remote without overwriting local files?)
  • Reactjs:状态改变时重新渲染iframe(Reactjs: re-renders iframes when state changed)
  • 奇怪的网址,以及跟随php页面流程的困难(odd url, and difficulty in following the php page flow)
  • 标签活动无效(Tab Activity is not working)
  • JavaME合适的语法编译器建议?(JavaME-suitable grammar compiler recommendations?)
  • 指定参数(Specifying arguments)
  • 可以通过Ruby插件或控制台覆盖Sketchup中的键盘快捷键吗?(Can one override keyboard shortcuts in Sketchup through the a Ruby Plugin or Console?)
  • 计算Java EE Web App中用户数的最佳方法(Best way to count number of users in a Java EE web App)
  • 无法使用templateUrl加载cordova中的外部模板(unable to load external templates in cordova with templateUrl)
  • PHPExcel:写入期间无法使用缓存(PHPExcel: Unable to use cache during write)
  • 在javascript中嵌套这个指针(nested this pointer in javascript)
  • 谁跟领航致远培训过,有问题问下啊
  • 控制器要求在入门时下载(Controller ask to download on entry)
  • 未能通过conda安装Asyncio(Failure to install Asyncio via conda)
  • 如何查找已完成项目的总长度?(How to find length of total completed items?)
  • 如何检查OleInitialize是否已被调用?(How to check if OleInitialize has already been called?)
  • SQL在特定范围内返回列中具有最大值的行(SQL Returning rows with max value in column, within a specific range)
  • preg_match从url获取id(preg_match get the id from url)
  • 如何在运算符中为make方程转换perl变量?(How to convert a perl variable in a operator for make equations?)
  • 在导航上方添加空格/标题。(Add a white space/ header above navigation.)
  • MeetingItem已保存;(MeetingItem saved; but change now shown in Calendar)
  • c#vb:我们应该使用System.Lazy进行资源密集型任务吗?(c# vb: Should we use System.Lazy for resource-intensive task? (when threading is not needed))
  • 为什么在armeabi代码中使用armeabi-v7a代码?(Why use armeabi-v7a code over armeabi code?)
  • 获取请求的自定义标头(Java HTTP)(Fetching a custom header of a request (Java HTTP))
  • 是否可以在嵌套的if语句中从varchar转换为numeric以动态评估参数?(Is it possible to convert from varchar to numeric within a nested if statement in order to dynamically evaluate a parameter?)
  • 如何将Html.ActionLink转换为链接到Ajax调用的按钮?(How to convert from Html.ActionLink to a button linked to Ajax call?)
  • 应用程序如何处理Windows符号链接?(How are Windows symbolic links treated by the apps?)
  • html,js,css在jsfiddle中工作,但不在sharepoint中(html, js, css works in jsfiddle but not in sharepoint)
  • 从Ruby脚本调用Elasticsearch Rest API(Calling Elasticsearch Rest API from Ruby script)
  • 如何将嵌套setTimeouts转换为承诺(How to convert nested setTimeouts to promises)