Как открыть диалоговое окно после отправки формы, чтобы показать успешную публикацию - asp.net MVC

ProgramBox

Как открыть диалоговое окно после отправки формы, чтобы показать успешную публикацию — asp.net MVC

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #asp.net-mvc

Вопрос:

Я работаю над asp.net Проект MVC. Я хочу показать пользователю диалоговое окно после публикации формы, чтобы пользователь мог понять, было ли оно успешным или нет, а также, если пользователь хочет закрыть диалоговое окно, это было бы возможно.

Я много искал и прочитал кое-что, что я могу вернуть в частичном виде, но я не уверен, что частичный вид — это то, что мне нужно в этой ситуации

мой вопрос в том, возможно ли это сделать с помощью java-script с .dialog() или если я должен использовать частичный просмотр, то, пожалуйста, дайте мне небольшое объяснение, как это работает. Мне нужно что-то подобное, чтобы показывать после нажатия пользователем кнопки отправкиhttp://jsfiddle.net/db5SX

вот мой контроллер:

 public ActionResult Index()
    {
        ViewBag.ResultMessage = TempData["ResultMessage"];
        return View();
    }
 public ActionResult Create()
    {


        return View();
    }
  [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Email,Phone,Message,Date")] Contact_US contact_US)
    {
        if (ModelState.IsValid)
        {
            db.Contact_US.Add(contact_US);
            db.SaveChanges();
            TempData["ResultMessage"] = "POSTED SUCESSFULLY...!  We WILL CONTACT YOU SOON.";
            return RedirectToAction("Index");
        }


        return View(contact_US);
    }

вот мое мнение, если необходимо:

     <div class="form-group col-md-8">


        <h3 class="txtformat padbot50px">Get in touch with us</h3>

        <div class="text-danger message ">
            @ViewBag.ResultMessage
        </div>




        @using (Html.BeginForm("Create", "Contact_Us", FormMethod.Post, new { @id = "contactusform" }))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">



                <div class="form-group">
                    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group hidden">
                    @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12 contactusmsg">
                        @Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group contactuspostbtn">
                    <div class="col-md-12">
                        <input id="postcontactusmessage" type="submit" value="Send" class="btn btn-default" data-toggle="modal" data-target="#myModal" />
                    </div>

                </div>
            </div>
        }





    </div>






</div>

информация о моем макете, если необходимо :

 <script src="~/Scripts/jquery-3.1.0.min.js"></script>
 <link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/tinymce/tinymce.min.js"></script>

1. Немного неясно, что вы хотите сделать — в вашем Index представлении есть форма для создания Contact_US объекта, и в методе POST вы перенаправляете обратно в то же представление (для отображения сообщения / диалога), но почему вы хотите, чтобы пользователь также создал другой Contact_US объект?

2. большое вам спасибо. вы имеете в виду в этой строке return View(contact_US) ? потому что я хотел, чтобы пользователю не приходилось записывать все, когда что-то произошло, и не удалось сохранить. Я создаю представление для действия create , чтобы вернуть это представление, когда что-то произойдет, и форма не была успешно сохранена

3. Нет, это не то, что я имел в виду. Ваш код сбивает с толку, и неясно, что вы хотите сделать. В вашем Index() методе у вас есть ViewBag.ResultMessage = TempData["ResultMessage"]; (вы перенаправляете на этот метод из Create() метода POST, и в показанном вами представлении у вас есть @ViewBag.ResultMessage что означает, что показанное вами представление является Index.cshtml — но это не имеет смысла, потому что это представление также предназначено для создания нового contact_US объекта.

4. сначала значение равно нулю, поэтому оно ничего не показывает пользователю, но когда пользователь успешно отправляет форму и сохраняет ее, оно перенаправляет на индекс с помощью этого return RedirectToAction("Index"); while tempdata , измененного на сообщение success. Я хочу опустить это <div class="text-danger message "> @ViewBag.ResultMessage </div> и установить показ в диалоговом окне, а не только div над моей формой

5. Затем все, что вам нужно сделать, это включить html для диалогового окна в соответствии с вашей скрипкой (и в <p> добавить @ViewBag.ResultMessage . Но пусть диалоговое окно будет скрыто и используйте javascript для его отображения, если ViewBag.ResultMessage это не null так. Но это все еще не имеет смысла. Почему у вас есть Create.cshtml представление для создания contact_US и Index.cshtml представление, в котором также есть форма для создания contact_US ?. И почему, если это успешно, вы хотите разрешить пользователю создавать другую contact_US ?

Ответ №1:

Хороший способ сделать это — абстрагировать его в базовом контроллере и показать сообщение, например, в _layouts.cshtml файле:

Создайте базовый контроллер, который будет унаследован всеми вашими контроллерами

 public class BaseController : Controller
    {
        public string SucccessMessage
        {
            get
            {
                return TempData["SuccessMessage"] as string;
            }
            set
            {
                TempData["SuccessMessage"] = value;
            }
        }

        public string ErrorMessage
        {
            get
            {
                return TempData["ErrorMessage"] as string;
            }
            set
            {
                TempData["ErrorMessage"] = value;
            }
        }
    }

В _Layouts.cshtml,

  <div class="container body-content" id="bodyContainer">
        <div class="spacer"></div>
        @if (@TempData["SuccessMessage"] != null)
            {
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                @TempData["SuccessMessage"]
            </div>
        }
        else if (@TempData["ErrorMessage"] != null)
        {
            <div class="alert alert-danger alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                @TempData["ErrorMessage"]
            </div>
        }

        <div class="spacer"></div>
        @RenderBody()
        <hr id="hr" />
        <footer>
            <p>amp;copy; @DateTime.Now.Year - Your APp </p>
        </footer>
    </div>

Теперь все, что вам нужно сделать внутри вашего контроллера, это:

 public class MyController:BaseController
{
 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Email,Phone,Message,Date")] Contact_US contact_US)
    {
        if (ModelState.IsValid)
        {
            db.Contact_US.Add(contact_US);
            db.SaveChanges();
            SucccessMessage = "POSTED SUCESSFULLY...!  We WILL CONTACT YOU SOON.";
            return RedirectToAction("Index");
        }


        return View(contact_US);
    }
}

1. спасибо, хорошая идея. я буду работать над этим, но основная проблема заключается в том, в чем разница между использованием частичного просмотра и открытием диалогового окна. но вы помогли таким приятным способом. Я поработаю над этим и дам вам знать. еще раз спасибо

2. В _Layout.cshtml вы можете добавить любой код, который вам нужен, например: вы можете добавить JavaScript для открытия модального диалога или оповещения или чего-то еще