locked
I want to open a pop up to show the data when the user press the add button RRS feed

  • Question

  • User1421057020 posted

    I want to open a pop up to show the data when the user press the add button 

    here see console log also I want to print statename and cityname but current print the stateid and cityid 

    when user click on the add button then I want to open popup modal

    ex:

    student id : 1015

    studentname : rajs

    studentaddress : asd

    stateid : 1 // here issue is displaying 1 and I want to statename  see above console log

    cityid : 1 // here issue is displaying 1 and I want to cityname  see above console log

    pincode : 1

    HomeController.cs

           public ActionResult Index()
    {
    var model = InsAjaxEntities.states.Select(x => new ViewModal
    {
    Key = x.statename,
    Value = x.stateid.ToString()
    }).ToList();
    return View();
    }
    public JsonResult Add(student student) { InsAjaxEntities.students.Add(student); InsAjaxEntities.SaveChanges(); return Json(JsonRequestBehavior.AllowGet); }

    Index.cshtml

    @model List<AxInMvc.Models.ViewModal>

    <div class="modal fade" id="myModal" 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">×</button> <h4 class="modal-title" id="myModalLabel">Add Employee</h4> </div> <div class="modal-body"> <form"> <div class="form-group"> <input type="hidden" id="studentid" class="form-control" /> </div> <div class="form-group"> <label for="studentname"><strong>StudentName:</strong></label> <input type="text" id="studentname" class="form-control" /> </div> <div class="form-group"> <label for="studentaddress"><strong>StudentAddress:</strong></label> <input type="text" id="studentaddress" class="form-control" /> </div> <div class="form-group"> <label for="stateid"><strong>StateName:</strong></label> <select id="stateid" class="form-control"> <option value="">-- Select State --</option> @foreach (var item in Model) { <option value="@item.Value">@item.Key</option> } </select> </div> <div class="form-group"> <label for="cityid"><strong>CityName:</strong></label> <select id="cityid" class="form-control"> <option value="">-- Select City --</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();">Add</button> </div> @section scripts { <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript">

    $(document).ready(function () {
    debugger
    $("#stateid").change(function () {
    $.ajax({
    type: 'GET',
    url: '@Url.Action("getCities")',
    data: { stateid: $("#stateid").val() },
    success: function (data) {
    debugger
    $("#cityid").empty();
    var opt = "";
    for (var i = 0; i < data.length; i++) {
    opt = '<option value=' + data[i].Value + '>' + data[i].Key + '</option>';
    $("#cityid").append(opt);
    }
    },
    error: function (x, y, z) {
    debugger
    }
    });
    });
    $(document).ready(function () {
    loadData();
    });
    }); function Add() { debugger var data = new FormData(); data.append('file', $('#studentimage')[0].files[0]); data.append('studentname', $("#studentname").val()); data.append('studentaddress', $('#studentaddress').val()); data.append('stateid', $('#stateid').val()); data.append('cityid', $('#cityid').val()); data.append('pincode', $('#pincode').val()); $.ajax({ type: "POST", url: "/Home/Add", contentType: "application/json;charset=utf-8", dataType: "json", data: data, contentType: false, processData: false, success: function (data) { debugger loadData(); $('#myModal').modal('hide'); alert($("#studentname").val()); alert($('#studentaddress').val()); alert($('#stateid').val()); // here issue is print the state id 1 I want to print statename alert($('#cityid').val()); // here issue is print the city id 1 I want to print cityname alert($('#pincode').val()); }, error: function (jqXHR, textStatus, exception) { alert(jqXHR.status); alert(textStatus.status); alert(exception.status); debugger } }); };

    ViewModal.cs

        public class ViewModal
        {
            public string studentid { get; set; }
            public string studentname { get; set; }
            public string studentaddress { get; set; }
            
    
            public string state { get; set; }
            public string city { get; set; }
           
    
            public string Key { get; set; }
            public string Value { get; set; }
    
        }

    student.cs

    namespace AxInMvc.Models
    {
    using System;
    using System.Collections.Generic;

    public partial class student
    {
    public string studentid { get; set; } public string studentname { get; set; } public string studentaddress { get; set; } public string stateid { get; set; } public string cityid { get; set; } public virtual city city { get; set; }
    public virtual state state { get; set; } }

    Database:

    how to open a pop up to show the data when the user press the add button and also print the statename and cityname?

    Thursday, June 25, 2020 6:28 PM

All replies

  • User-474980206 posted

    you are not passing the model to the view, try:

            public ActionResult Index()
            {
                var model = InsAjaxEntities.states.Select(x => new ViewModal
                {
                    Key = x.statename,
                    Value = x.stateid.ToString()
                }).ToList();
                return View(model);
            } 

    Thursday, June 25, 2020 7:34 PM
  • User475983607 posted

    Syntax to get the selected text.

    $('#stateid option:selected').text();

    Thursday, June 25, 2020 7:43 PM
  • User1686398519 posted

    Hi raju bhai,

    According to your needs, I modified your code, please refer to it.

    • Since the code you gave is incomplete, I modified the code for testing, you can modify it according to your needs.
    • I added "statelist" and "citylist" to ViewModal.
    • I use @Html.DropDownListFor to display the drop-down list.
    • You want to use jquery to view the text of the drop-down list, you can write like this.
      • alert($("#statelist option:selected").text());

    ViewModal(I only gave the added code.)

        public class ViewModal
        {
            public SelectList statelist { get; set; }
            public SelectList citylist { get; set; }
        }

    Controller

            public ActionResult Index()
            {
                ViewModal model = new ViewModal();
                model.statelist = new SelectList(InsAjaxEntities.states.ToList(), "stateid", "statename");
                model.citylist = new SelectList(InsAjaxEntities.cities.Where(c => c.stateid ==1).ToList(), "cityid", "cityname");
                return View(model);
            }
            public JsonResult getCities(int? stateid)
            {
                if (stateid == null)
                {
                    stateid = 1;
                }
                var citylist = new SelectList(InsAjaxEntities.cities.Where(c => c.stateid == stateid).ToList(), "cityid", "cityname");
                return Json(citylist, JsonRequestBehavior.AllowGet);
            }

    Page

    @model WebApplication3.Models.ViewModal
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Add
    </button>
    <div class="modal fade" id="myModal" 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">×</button>
                    <h4 class="modal-title" id="myModalLabel">Add Employee</h4>
                </div>
                <div class="modal-body">
                    <form">
                        <div class="form-group">
                            <input type="hidden" id="studentid" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="studentname"><strong>StudentName:</strong></label>
                            <input type="text" id="studentname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="studentaddress"><strong>StudentAddress:</strong></label>
                            <input type="text" id="studentaddress" class="form-control" />
                        </div>
    
                        <div class="form-group">
                            <label for="stateid"><strong>StateName:</strong></label>
                            @Html.DropDownListFor(m => m.statelist, new SelectList(Model.statelist, "Value", "Text"), "-- Select State --")
                        </div>
    
                        <div class="form-group">
                            <label for="cityid"><strong>CityName:</strong></label>
                            @Html.DropDownListFor(m => m.citylist, new SelectList(Model.citylist, "Value", "Text"), "-- Select City --")
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();">Add</button>
                        </div>
                </div>
            </div>
        </div>
    </div>
    
    @section scripts {
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script type="text/javascript">
         $(document).ready(function () {
             $("#statelist").change(function () {
                    $.ajax({
                        type: 'GET',
                        url: '@Url.Action("getCities")',
                        data: { stateid: $("#statelist").val() },
                        success: function (data) {
                            $("#citylist").empty();
    alert($("#statelist option:selected").text()); var opt = ""; for (var i = 0; i < data.length; i++) { opt = '<option value=' + data[i].Value + '>' + data[i].Text + '</option>'; $("#citylist").append(opt); } }, error: function (x, y, z) { debugger } }); }); }); </script> }

    Here is the result.

     
    Best Regards,

    YihuiSun

    Friday, June 26, 2020 7:31 AM
  • User1421057020 posted

    Hello Yihinsun 

    thanks for the help my issue is solved but

    I does not understand this line

    InsAjaxEntities.cities.Where(c => c.stateid ==1)  //this line not understand

    means this line 

    c => c.stateid ==1)  //means follow the parent object? 

    and this statement also does not understand

                if (stateid == null)
                {
                    stateid = 1; //this line not understand
                }

    Friday, June 26, 2020 3:03 PM
  • User1686398519 posted

    Hi raju bhai,

    • InsAjaxEntities.cities.Where(c => c.stateid ==1)
      • The stateid of the first value of the state drop-down list is 1. Therefore, the drop-down list of the corresponding city defaults to all cities with a stateid value of 1.You can set according to your own actual situation.
    • if (stateid == null)
      {
      stateid = 1; 
      }
      • This is to prevent when the passed stateid is empty. Because when the stateid is empty, the returned citylist will also be empty. You can modify it according to your own needs.

    Best Regards,

    YihuiSun

    Monday, June 29, 2020 6:04 AM