Discover the perfect method for incorporating multiple models into a single view

I'm trying to include my class model in the index view so that I can have ClassID for a dropdown menu displaying classes, but I'm unsure of how to do it.

This is what my index looks like:

@using opr.Models;
@using PagedList;
@using PagedList.Mvc;
@model PagedList.IPagedList<opr.Data.C_QuestionTable>
@{
  ViewBag.Title = "Index";
}

<h2>Index</h2>
<div class="alert-success form-control m-auto w-75 custom-form">
  <div class="col-6 pb-3 input-control">
    <label for="ex3"> Select Class:</label>
    @Html.DropDownListFor(model => model.ClassID, (SelectList)ViewBag.dataForDropDowns, new { @class = "form-control select2ddl" })
  </div>
  <p>
    @Html.ActionLink("Create New", "Create")
  </p>
  <table class="table">
    <tr>
      <th>
        QuestionText
      </th>
    </tr>
    @foreach (var item in Model)
    {
      foreach (var answer in item.C_AnswerTable)
      {
        <tr>
          <td>
            @Html.DisplayFor(modelItem => item.QuestionText)
            @Html.RadioButton("searchBy", answer.Options, true)
            <text>@answer.Options</text>
          </td>
        </tr>
      }
    }
    <tr>
      <div class="pagination pull-left">
        <hr />
        <td colspan="3">@Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }))</td>
      </div>
    </tr>
  </table>
</div>

Here is my Controller code:

examsEntities db = new examsEntities();
public ActionResult Index(int?page)
{
  var mod1 = db.myclasses.Select(s => new { s.ID, s.C_name }).ToList();
  SelectList sList = new SelectList(mod1, "ID", "C_name");
  ViewBag.dataForDropDown = sList;

  var pageNumber = page ?? 1;
  var pageSize = 3;
  var question = db.C_QuestionTable.OrderBy(x => x.QuestionText).ToPagedList(pageNumber, pageSize);   
  return View(question);
}

Answer №1

namespace OMS.Models
{
public class AbcModel
{

    public int Id { get; set; }

    public string Name{ get; set; }


    public Classmodel classmodel{ get; set; }


  }  
}

incorporate the class model into the Index model (Abc model) and display it in the view

@using opr.Models;
@using PagedList;
@using PagedList.Mvc;
@model PagedList.IPagedList<opr.Data.C_QuestionTable>
@{
ViewBag.Title = "Index";
}

<h2>Index</h2>
 <div class="alert-success form-control m-auto w-75 custom-form">
 <div class="col-6 pb-3 input-control">
 <label for="ex3"> Select Class:</label>
 @Html.DropDownListFor(model => model.classmodel.ClassID, 
  (SelectList)ViewBag.dataForDropDowns, new { @class = "form-control 
  select2ddl" })
  </div>
   <p>
    @Html.ActionLink("Create New", "Create")
  </p>
  <table class="table">
   <tr>
    <th>
     QuestionText
   </th>
    </tr>
    @foreach (var item in Model)
    {
    foreach (var answer in item.C_AnswerTable)
     {
       <tr>
        <td>
        @Html.DisplayFor(modelItem => item.QuestionText)
        @Html.RadioButton("searchBy", answer.Options, true)
        <text>@answer.Options</text>
        </td>
       </tr>
       }
    }
<tr>
  <div class="pagination pull-left">
    <hr />
    <td colspan="3">@Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }))</td>
  </div>
</tr>
 </table>
</div>

Feel free to reach out if you need further assistance

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to effortlessly update all fields in a mongoose document automatically?

Take for instance the scenario where I need to update a mongoose document in a put request. The code template typically looks like this: app.put('/update', async(req,res) => { try{ const product = await Product.findById(req.body.id) ...

Is your angularjs localstorage giving you trouble?

I am encountering an issue with local storage on my webpage. Upon initial visit, I am seeing an outdated value from local storage. However, upon refreshing the page, I am able to access the current value. How can I prevent this error and ensure that I only ...

Troubleshooting a Problem with JSON Array in JavaScript/jQuery - Understanding Undefined Values

Currently, I am fetching data from a JSON file: [ { "video": "video/preroll" }, { "video": "video/areyoupopular" }, { "video": "video/destinationearth" }] I have attempted to use console.log at different stages and encountered an issue when p ...

Is there a way to alter a class using ng-class only when the form is deemed valid?

I am trying to implement a feature where an input field shows as required, but once the user enters text, it indicates that the input is valid by changing the border color from red to green. I am facing an issue with this line of code always returning fal ...

Struggling to properly send props to the child component in Vue 3

Is there a way to pass data from the request through axios in the root component to the child using Vue? Currently, only the "title" field is displayed correctly, but I also need to output the "body". Note: This is my first time working with Vue and I&apo ...

When Jquery JSON DOM fails to load data

I've been trying to implement this functionality on my website by following various tutorials, but I am facing an issue where the data is not displaying anywhere. Initially, it was showing the return value of json_encode, but now it's not even do ...

Convert HTML special characters to ASCII characters using JavaScript

Does Javascript have a specific function for this type of replacement? (replaceAll) PARAMS+= "&Ueberschrift=" + ueberschrift.replaceAll(">",">").replaceAll("<","<"); PARAMS+= "&TextBaustein=" + textBaustein.replaceAll(">",">"). ...

Using the functionalities of the parent component

Exploring Base.vue <template><div>{{ name }}</div></template> <script> export default { data() { return {name: 'Example Component'}; } }; </script> And introducing Extended.vue: <script> ...

Obtaining a reference to a filtered result in ngRepeat with AngularJS

Using an ng-repeat directive with a filter, the code looks like this: ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4" The rendered results are visible; now the goal is to perform some logic on that result in the cont ...

"Error: The module specified could not be located" in an ASP.NET application

After attempting to transfer my entire web application to a new instance of Visual Studio 2008 on a different (virtual) machine, I encountered an issue. The application builds successfully, however, upon trying to run it, I am met with the error message " ...

Generating a new dialog box at the exact location of the user's click

I have a canvas element on my website that allows users to select various items. To offer more choices for what can be done with the selected item, I want to create a small popup with a few options. However, I am running into an issue where I cannot positi ...

Issue encountered when attempting to adjust the connection string in a dynamic fashion

I am encountering an issue while attempting to change the connection string for my entities. Below is the code snippet where I'm facing the problem: SqlConnectionStringBuilder sqlBuilder = new SqlConnectionStringBuilder(); sq ...

Having trouble with AngularJS integration in Node.js Express framework?

My AngularJS HTML file is below, and I am accessing it using http://localhost:3000/modulename/create. However, the issue arises as AngularJS is not functioning properly. For example, the ng-repeat directive is empty in the template, whereas when we console ...

The functionality of the Bootstrap 4 Carousel featuring multiple items is experiencing malfunctions

I'm encountering an issue with my Bootstrap 4 card carousel. When the next or prev buttons are clicked, there is a strange transition effect. Additionally, in the mobile version, the buttons do not work properly. It seems that when the card slides to ...

Tips for utilizing canvas within Angular applications

When working with canvas in JavaScript, the usual approach is: var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); However, when it comes to Angular2, I am unable to access the HTMLCanvasElement object ...

A guide on displaying containers with jQuery and CSS

Looking to create a smiley survey using only Front-End technologies. Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none. I attempted to implement this functionality using ...

What is the best way to retrieve the parent element in jQuery when you already have the child element selected

I am working with jQuery Mobile, which automatically generates a lot of the DOM structure. The challenge I am facing is removing radio buttons without having an id for the parent div due to the HTML construction in jQuery Mobile. While I can easily targe ...

Pagination in the jQuery datatables plugin is not functioning as expected

Help Needed I am using the datatables jQuery Plugin to display a table, but I am facing an issue where all entries are shown without any pagination. Can someone please assist me with this problem? Below is my index.cshtml code: @{ Layout = null; } & ...

As soon as I clicked on the popup button, it opened Google providers. However, when I tried to close the popup by clicking on the close button, I encountered

When using a React App, I encountered an issue where clicking on the login button opened a popup window. After closing the popup and attempting to click on the login button again, the Google provider popup did not appear. Here are the step-by-step actions ...

Retrieve JSON information using asynchronous JavaScript requests

I am currently working on pulling JSON data via ajax. While I am successful in retrieving data from the first 2 items, it is the information under "placemark" that I urgently require. My goal is to present this data in a list format similar to an RSS feed. ...