显示消息而不在html中重新加载页面

时间:2014-12-01 12:01:28

标签: javascript c# jquery html asp.net

我有一个带有姓名,电子邮件,联系人和电子邮件的html表单。带有提交按钮的反馈字段。

我的html表单代码是

<div class="feedback">
    <a id="feedback_button">Feedback</a>
    <form method="post" action="http://localhost:12459/WebsiteForm/WebSiteFeedbackProcessing.aspx"
    name="new_post">
    <div class="form">
        <div>
            <div>
                <input type="text" class="text_field" id="fname" name="fname" placeholder="First Name"
                    style="margin-bottom: 3px; width: 50%;" maxlength="20" />
            </div>
            <div>
                <input type="text" class="text_field" id="email" name="email" placeholder="Email"
                    style="margin-bottom: 3px; width: 50%;" maxlength="30" />
            </div>
            <div>
                <input type="text" class="text_field" id="contact" name="contact" placeholder="Contact No"
                    style="margin-bottom: 3px; width: 50%;" maxlength="15" />
            </div>
            <textarea id="feedback" name="feedback" placeholder="feedback" style="min-height: 41px;
                width: 48%;" maxlength="100" rows="" cols=""></textarea>
        </div>
        <input type="submit" value="Send" class="sendfeedback" />
    </div>
    </form>
</div>

我将这四个值保存到sql server数据库。

单击“提交”按钮后,表单将转到另一个项目,该项目是asp.net c#项目(代码如下),用于保存数据。 这里通过函数SaveFeedback,它返回结果为整数值1,表示成功&amp; 0表示失败。

我的代码是

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using CorporateOnlineTest.BAL;
using System.Text;

namespace CorporateOnlineTest.Web.WebsiteForm {
  public partial class WebSiteFeedbackProcessing: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
      string fname = "";
      string contact = "";
      string email = "";
      string feedback = "";

      for (int i = 0; i < Request.Form.AllKeys.Length; i++) {
        string key = Request.Form.AllKeys[i] + "";
        string value = Request.Form[i];

        if (key + "" == "fname") {
          fname = value;
        } else if (key + "" == "contact") {
          contact = value;
        } else if (key + "" == "email") {
          email = value;
        } else if (key + "" == "feedback") {
          feedback = value;
        }
      }

      //Insert in database and send mail.
      if (Request.Form.AllKeys.Length > 0) {
        int Submit;

        SubAdminBAL objSubadmin = new SubAdminBAL();
        Submit = SaveFeedback(fname, contact, email, feedback);

        if (Submit == 1) {
          ScriptManager.RegisterStartupScript(this, this.GetType(),
            "alert",
            "alert('Your Feedback Has Been Sent Successfully!');window.location ='http://localhost:2421/Psychometricachat_ByKaustubh/p/online-managerial-skill-test.html';",
            true);
        } else {
          ScriptManager.RegisterStartupScript(this, this.GetType(),
            "alert",
            "alert('Please Try Again!');window.location ='http://localhost:2421/Psychometricachat_ByKaustubh/p/online-managerial-skill-test.html';",
            true);
        }
      }
    }

    [WebMethod]
    public int SaveFeedback(string fname, string contact, string email, string feedback) {
      int Result = 0;
      SubAdminBAL bl = new SubAdminBAL();

      Result = Convert.ToInt32(bl.SaveWebsiteFeedbackBAL(fname, contact, email, feedback));

      return Result;

    }
  }
}

我想在我的html页面上显示这些消息而不重新加载该页面。

我尝试了很多选项,但每次我的页面在消息显示之前或之后重新加载。

有没有人有任何解决方案。请尽早恢复。

提前致谢

3 个答案:

答案 0 :(得分:2)

你可以使用jQuery .ajax SaveFeedback,类似这样的代码:

  

jQuery.ajax()执行异步HTTP(Ajax)请求。   More

$('.btnSaveFeedback').on('click', function () {
    var fname = $('#fname').val();
    var contact = $('#contact').val();
    var email = $('#email').val();
    var feedback = $('#feedback').val();

    $.ajax({
        url: "/WebSiteFeedbackProcessing.aspx/SaveFeedback", // your Page, WenMethod, Handler,...
        type: 'post',
        data: {
            fname: fname,
            contact: contact,
            email: email,
            feedback: feedback
        },
        success: function (result) {
            alert('Successfully!!');
        },
        error: function (result) {
            alert('Failed!!');
        }
    });
});

答案 1 :(得分:0)

您可以使用ajax方法(也是jquery ajax)

参考 -

Basic of jquery ajax

Jquery ajax tutorial

答案 2 :(得分:0)

您是否使用Scriptmanager启用了页面方法?

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/