3

问这个问题我觉得很荒谬，但在这里，我正在尝试制作一个非常简单的 ASP.NET MVC 5 应用程序。我的第一个是善良的。我想要一个按钮，单击该按钮时会执行某些操作但不会更改用户的视图或最多返回“电子邮件已提交”消息。

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

谢谢你的帮助。

编辑

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

索引.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>

家庭控制器

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");
        }
    }
4

3 回答 3

5

好的，假设您有以下按钮，用 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 代码来连接click事件。

编辑：

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

<script type="text/javascript">
    $(function(){
        $("input#MyButton").on('click', function(){
        // Do what you want.
        });
    });
</script>

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

或者，您可以将该 jQuery 放在单独的 JavaScript (*.js) 文件中。只需确保将以下内容添加到中的<head>部分_Layout.cshtml：

<script type='text/javascript' src='@Url.Content("~Scripts/YourFile.js")' ></script>

_Layout.cshtml是在整个项目中使用的主布局文件（假设您在 Visual Studio 中选择了常用的 ASP.NET MVC 项目模板之一）。

编辑：

关于 jQuery 引用，_Layout.cshtml如果尚未引用 jQuery，您可以在其中添加：

<script type='text/javascript' src='@Url.Content("~Scripts/jquery.version.js")' ></script>

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

于 2013-10-15T12:33:26.427 回答
3

您可以使用 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});
  }
}
于 2013-10-15T13:24:22.907 回答
1

如果您不想使用普通的 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 方式，但这里是使用 Ajax.ActionLink的示例

于 2013-10-15T20:36:29.263 回答