Question

我觉得这个问题很荒谬但是，我试着制作一个非常简单的ASP.NET MVC 5应用程序。我的第一个是善良的。我希望有一个按钮，当点击它做某事但不改变用户的视图或最多返回“电子邮件已提交”消息。

我的问题是我无法弄清楚如何将按钮连接到不改变视图的“事件”或“动作”（即使用@Html.ActionLink()）或是提交按钮。我找到的每个例子也都是一个提交按钮。

感谢您的帮助。

修改

这仍然不适合我。我将在下面发布我的代码。我的努力是基于这里所说的和链接的帖子。另外，仅供参考，我可以使用`@ Html.ActionLink（“链接文本”，“actionname”），但它显示为链接，我正在尝试使用“按钮”。

Index.cshtml

@{
    ViewBag.Title = "Home Page";  
}

<div class="hero-unit">
    <h3>Marketing & Communications Project Request Form</h3>   
    <p>User: <strong>@Context.User.Identity.Name</strong></p> 
</div>
<div class="row">
    <div class="span4">
        @Html.ActionLink("Send Email", "SendEmail") @*this line works*@
        <input id="SendEmail" class="btn" type="button" value="SendEmail" /> @*this line does not

    </div>
</div>

<script type="text\javascript">
    $(function(){
        var url = '@Url.Action("SendEmail", "HomeController")';
        $("input#SendEmail").on('click', function() {                
            $.ajax({
                url: url    
            })
        });
    });
</script>

的HomeController

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult SendEmail()
        {
            //Code to create and send email here

            return View("Index");
        }
    }

Answer 1

好的，说你有以下按钮，用HTML编写：

<input type="button" id="MyButton" value="Click Me />

您可以使用jQuery连接到click事件：

$(function(){
    $("input#MyButton").on('click', function(){
    // Do what you want.
    });
});

如果您使用HTML帮助程序，例如HTML.TextBoxFor()，只要您知道生成的input的id，就可以使用相同的jQuery代码来连接{{1}事件。

编辑：

您可以将jQuery代码放在视图中，例如

click

通常您会发现脚本代码位于视图底部附近，但您可以将其放在任何您喜欢的位置。

或者您可以将jQuery放在单独的JavaScript（* .js）文件中。只需确保将以下内容添加到<script type="text/javascript"> $(function(){ $("input#MyButton").on('click', function(){ // Do what you want. }); }); </script>中的<head>部分：

_Layout.cshtml

<script type='text/javascript' src='@Url.Content("~Scripts/YourFile.js")' ></script>是一个在您的项目中使用的主布局文件（假设您在Visual Studio中选择了一个常用的ASP.NET MVC项目模板）。

编辑：

关于jQuery引用，在_Layout.cshtml中你可以添加它，如果还没有引用jQuery：

_Layout.cshtml

只需替换正确的文件名即可。现在，如果您的MVC应用程序使用捆绑，事情会变得有趣。这有点超出了我的知识库，所以最好还是看看有关MVC应用程序中CSS / JavaScript捆绑的其他SO问题。

Answer 2

您可以使用jQuery ajax（post）调用

简单地使用下面的示例代码实现

<a id="btn-send-mail">SendEmail</a>

JS

$(document).ready(function(){
    $('#btn-send-mail').click(function(e){
    e.preventDefault();

    var emailData={};
    emailData.toMail='sample@testmail.com';

    $.post('/Mail/Send/',{data:emailData}, function(result){
       if(result.status==true){
       alert('Email submitted successfully');
    }});//end of post
   });//end of click
 });//end of ready

控制器代码

public class MailController
{
  [HttpPost]
  public JsonResult Send(Email obj)
  {
    //Code for sending email
    return Json(new {status=true});
  }
}

Answer 3

如果您不想使用普通的jquery调用，可以利用Razor @ Ajax.ActionLink。

您只需像普通的Html.ActionLink一样设置链接，然后创建一个发送电子邮件的控制器操作，因为此调用是异步的，它不会刷新页面。

@Ajax.ActionLink("Send Email", // <-- Text to display
     "SendEmail", // <-- Action Method Name
     new AjaxOptions
     {
        UpdateTargetId="", // <-- Used if you want to update up, DOM element ID to update
        HttpMethod = "GET" // <-- HTTP method
     })

我建议使用jquery方式，但这里是example使用Ajax.ActionLink

如何使用按钮（非提交）单击事件来调用控制器上的方法？

3 个答案: