How to Show Modal Window in Controller's Action

how to show modal window in controller's action?

Step 1.

In your rendered view, have a div with id "my_modal_content" where will insert the modal's content and show the modal.

Step 2.

Render a js.erb file which will append the modal to our page

#your rails controller method
def my_method
  if something == true
    respond_to do |format|

      format.js { render :partial => 'somewhere/somefile.js.erb' }
      #I'm assuming its js request
    end
  else
    redirect to another page
  end
end

Step 4.

Write your js.erb file like this, which appends modal and then shows it.

#_somefile.js.erb file

$("#my_modal_content").html("<%= escape_javascript(render 'somewhere/my_modal') %>");
$("#myModal").modal('show');

Step 3.

Modal partial file _my_modal.html.erb placed within views/somewhere/ with you modal content ready.

<div class="modal fade" tabindex="-1" id="myModal" role="dialog">
  <div class="modal-dialog">
    ...<!-- all your content insdie -->
  </div>
</div>

Update

If you want to show an alert, its pretty straight forward. You just render js

if search_result.empty?
  message = "No result found. Try something else!"
  respond_to do |format| 
    format.js { render js: "alert(#{message});" }
  end
else
  redirect to another page
end

How to show modal window from controller method after 20 sec after login on any page

There's no need to call async method to manage this, simply try this in Your layout view.

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
<script>
 $(document).ready(function() {
 setTimeout(function() {
   $('#myModal').fadeIn(200);
 }, 20 000); // milliseconds
 });
</script>
}

How I can open popup window from controller action using form post method in mvc

Try this

In the Controller

TempData["ProcessMessage"] = "Email Sent Successfully.";
TempData["displayModal"] = "myModal";
return View(); 

In the View

@if (TempData["displayModal"] != null)
 {
   var modal = TempData["displayModal"].ToString();
    <script type='text/javascript'>
        $(document).ready(function(){
            $('#@modal').modal('show');
        });
    </script>
 }

And in the modal

  <p style="color: red;">@TempData["ProcessMessage"]</p>

Is it possible to call a modal popup (javascript) in MVC controller return

Best way to handle this is using Bootstrap modals and javascript inside your view.

Since you're using Partial view, I assume that you have another parent view such as Index View. You can attach html for your modals using javascript inside parent view, and then open your Partial view from Parent view. Here is an example of the same.

Index.cshtml

<div class="container">
        <a href="@Url.Action("NotFound", "Name")" id="NotFound" class="btn btn-primary">
</div>

    <div class="modal fade" id="NotFound-Model" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-    label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Add Holiday</h4>
                </div>
                <div class="divForNotFound">
                </div>
            </div>
        </div>
    </div>

JAVASCRIPT to handle Bootstrap Modal

    $(document).ready(function () {
            $('#NotFound').click(function (event) {
                event.preventDefault();
                $.get(this.href, function (response) {
                   $('.divForNotFound').html(response);
               });
                $('#Add-NotFound').modal({
                    backdrop: 'static',
                }, 'show');
            });
    }

Assuming you have a partial view NotFound.cshtml

@model Name.NotFoundModel
using (Ajax.BeginForm("NotFound", "Name", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "div-record", OnSuccess = "$('.close').click()" }))
{
    <div class="modal-body">
        <table class="table-bordered table-responsive table table-striped">
            <tr class="col-lg-12">
                <th class="label-primary">
                    @Html.Label("NotFoundLabel")
                </th>
            </tr>
        </table>
    </div>
}

Hope that helps!

How to fire off an ActionLink (controller method) defined in a view from a modal window in same view. Using jQuery?

I have a working solution.

I removed the actionlink:

<div class="col-md-3">
   @Html.ActionLink("Cancel Changes", "GetUserProfile", "UserProfile", null, new { 
   @class = "btn btn-info cancelButton" })
</div>

and replaced with:

<input class="btn btn-info cancelButton" value="Cancel Changes">

To the Yes button of the modal, I added:

href="/UserProfile/GetUserProfile" 

I removed the yes click function.

From the .cancelButton function, I removed:

e.preventDefault();

Here's the final solution:

@model GbngWebClient.Models.UserProfileForMaintVM

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", FormMethod.Post, new { 
enctype = "multipart/form-data", id = "formId" }))
{
    <div class="panel-body">
        <div class="row">
            <div class="form-group">
                <div class="col-md-3">
                     <input type="submit" value="Save" class="btn btn-primary saveButton" />
                </div>
                <div class="col-md-3">
                    <input class="btn btn-info cancelButton" value="Cancel Changes">
                </div>
            </div>
        </div>
    </div>
}

<div class="modal fade" id="myModal13" role="dialog" display="none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" style="padding:10px;">
                <h4 class="text-center">Any unsaved changes will not be processed if you cancel.   Continue ?</h4>
                <div class="text-center">
                    @* Goes to the Controller. No need for AJAX. *@
                    <a class="btn btn-info btn-yes13" href="/UserProfile/GetUserProfile">Yes</a>
                    <a class="btn btn-default btn-no13">No</a>
                </div>
            </div>
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<script type="text/javascript">
    $(document).ready(function () {
        $(".cancelButton").click(function (e) {
            // Trigger(show) the modal.
            $("#myModal13").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $(".btn-no13").click(function () {
            $("#myModal13").modal("hide");

            return false;
        });

        // Remove the modal once it is closed.
        $("#myModal13").on('hidden.bs.modal', function () {
            $("#myModal13").remove();
        });
   });
</script>

---

Related Topics